其实axios跨域请求的问题并不复杂，但是又很多的朋友都不太了解axios 请求出错的原因，因此呢，今天小编就来为大家分享axios跨域请求的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
一、前端的跨域问题理解
1、前端真的的是乱的一笔。--来自iOS开发者的一声哀鸣
2、需要把前端看成两部分，一部分是页面，另一部分是接口（或者加数据资源）。前端页面中调接口是有限制的，同源策略(SOP)要求我们调用的接口必须和页面在同一域名下，说是为了保证数据的安全。所谓同源：协议+域名+端口
3、但实际情况是，在前后端分离的大趋势下，好多页面和接口的服务器分布在不同的域名下。比如在开发时，前端页面分为本地环境、测试环境、仿真环境、正式环境，而接口也分为测试环境、仿真环境、正式环境，当然也可以有本地环境。他们在不同的域名下或IP下或者端口下，是不同源的。或者平时我们也能遇到需要调用不同的服务器数据资源。显然，同源策略保障了部分安全的同时，给开发造成了很多的麻烦。
4、所以，跨域问题是每个前端绕不过去的坎儿。
5、解决办法有两个方向，一个是前端解决，一个是服务端接口解除限制。
6、前端解决就是通过jsonp、jquery ajax、axios配置代理等。还有个简单的，比如Mac用户，可以使用Charles工具设置代理，临时使用。
7、服务端解决可以通过nginx反向代理设置允许跨域请求的域名、或者设置Access-Control-Allow-Origin，允许跨域资源共享等。
8、具体解决方案可参考 https://segmentfault.com/a/1190000011145364
9、反观iOS，轮廓简直不要太清晰，大部分时候只用专注于开发，没有各种乱七八糟的事情。
二、vue跨域解决方法
在vue.config.js文件中 module.exports={}中添加
'/profile':{//指定路径要跨域请求地址
//在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
//将/api开头的url转发到target上。
target:' https://sso.www.eee.cn/profile',//跨域请求地址
changeOrigin: true,//虚拟的站点需要更管origin
secure: true,//如果是https接口，需要配置这个参数
//顾名思义，将/api重写为/此时url变为 http://192.168.101.110:8888/而不是 http://192.168.101.110:8888/api
'^/profile':''
const service= axios.create({
baseURL:'/profile',//定义要跨域的接口路径
withCredentials: true,//是否支持跨域
timeout: 500000,// request timeout
'Cache-Control':'no-cache',
'Content-Type':'application/x-www-form-urlencoded'
三、vue跨域请求时报403
问题 vue开发的时候,使用axios跨域发送请求,同时post发送的数据格式是json格式,发送出去的时候发现控制台报错403,返回的信息提示是跨域的问题,但是后台已经对跨域进行了处理,因此出现这个问题并不是后台的问题,需要在前端解决,而且通过查看后台的日志发现后台根本没有接收到请求。
四、怎样避免跨域发出OPTIONS请求
1、我们在做移动开发的时候，往往在服务器中加入Access-Control-Allow-Origin，用来跨域，虽然这是最简单的跨域方案了，但是有一个问题，就是每一次正式请求的前面总是会带上一次OPTIONS请求，一些程序员往往一头雾水。
2、浏览器在处理跨域请求之前，会先对跨域请求做一个分析，将跨域请求分为2种：简单请求，和非简单请求。
3、凡是超出这些限制的请求一律被浏览器视为复杂请求，如果想跨域，浏览器会发送一个OPTIONS请求，跟服务器一探究竟。
4、如果服务器返回的数据让浏览器很满意，那么浏览器才会发出正式请求。
5、因为OPTIONS请求也是占带宽和时间的，从上图也可以看到，每个请求都带一个OPTIONS，非常难受。怎么避免？
6、 axios的默认请求内容类型是application/json，这就倒霉催的了，只能是修改成application/x-www-form-urlencoded。相应的，post数据的时候，要用qs库。具体做法去搜索吧。
7、你肯定是往headers里放东西了。别放就行了。
8、这下子前端是没有好办法了，只能从后端想办法了，就是使用Access-Control-Max-Age。
9、这需要后端同学配合，在设置OPTIONS跨域响应headers的时候，添加 Access-Control-Max-Age，这个参数的意思是把 OPTIONS响应缓存起来，在指定的时间内，不会再次发起 OPTIONS预请求，这样只有在第一次请求的时候会有 OPTIONS，之后浏览器会从缓存里读取响应，也就不会再发送OPTIONS请求了。比如：
10、注意，后端只需要处理OPTIONS请求，不要改正常的GET、POST请求。
五、axios可以解决跨域访问的问题吗
axios的跨域问题，分以下几种情况：
1、 server端不支持跨域，比如遇到下面的错误就是这种情况
No'Access-Control-Allow-Origin' header is present on the requested resource. Origin'http://xxx.com' is therefore not allowed access.
解决方案：如果 server端是自己开发的，那么修改相关代码支持跨域即可。如果不是自己开发的，那么可以自己写个后端转发该请求，用代理的方式实现。
2、 server端支持跨域，但不能响应 OPTIONS请求，比如在开发者工具中看到下图中的情况，说明 Nginx不能响应 OPTIONS请求。
六、vue用axios和springMVC跨域就是做不通呢,有人帮忙看下吗
楼主如果想使用axios进行跨域请求，可以尝试一下方法：
1、在config/index.js中进行跨域配置--proxyTable.具体代码如下所示：
target:'https://192.168.1.23:9443/g/',//23联调环境
2、需要进行跨域的接口进行对应的配置处理--进行替换法处理
*@description定义全局请求根地址
Global.baseRequest='/sys/';
3、axios中进行对应的请求前缀填充（后续会被替换掉，只是用来进行接口的统一处理，如果只是部分接口需要跨域，那自行处理即可）
七、详解Vue-cli如何实现跨域请求
本篇文章主要介绍了详解Vue-cli创建的项目如何跨域请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用 Vue-cli创建的项目，开发地址是 localhost:8023，需要访问 localhost:9000上的接口
不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置
不过 Vue-cli创建的项目，可以直接利用 Node.js代理服务器，实现跨域请求
接口地址原本为/form/save，但是为了匹配代理地址，在前面加一个/api
如果使用了 axios，可以全局配置一个 baseURL，这样就不用挨个儿修改 url了
在 config>index.js的 dev中添加配置项 proxyTable：
其中'/api'为匹配项，target为被请求的地址
因为在 ajax的 url中加了前缀'/api'，而原本的接口是没有这个前缀的
所以需要通过 pathRewrite来重写地址，将前缀'/api'转为'/'
如果本身的接口地址就有'/api'这种通用前缀，就可以把 pathRewrite删掉
2. easyUI下拉列表点击事件的实例详解
3. webpack开发环境跨域的实例教程
4. JS实现循环删除数组中元素的方法介绍
5. nodejs6中使用koa2框架的教程
如果你还想了解更多这方面的信息，记得收藏关注本站。
