Axio的跨域问题
AXIO的跨域问题
1、技术概述
1、跨域 :指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
2、跨域问题的出现
开发一些前后端分离的项目，使用 SpringBoot + Vue 开发时，后台代码在一台服务器上启动，前台代码在另外一台电脑上启动，此时就会出现问题。
比如： 后台 地址为 http://192.168.70.77:8081 前台 地址为 http://192.168.70.88:8080
此时 ip 与 端口号不一致，不符合同源策略，造成跨域问题。
2、技术详述
1：服务器端设置跨域
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Allow-Headers:content-type”);
header(“Access-Control-Request-Method:GET,POST”);
2：可以自己设置一个代理服务器，使用proxyTable。
首先在config/index.js 里面找到proxyTable ：{} ，然后在里面加入
proxyTable: {
'/api': {
target: 'http://129.204.247.165/',
changeOrigin:true,
pathRewrite: {
'^/api': 'http://129.204.247.165/'
},
}
},
注意这里面 /api是你自定义的，写成什么都可以。target 设置你调用的接口域名和端口号。这里理解成用‘^/api’代替target里面的地址，后面组件中我们调接口时直接用api代替 。比如我要调用'http://129.204.247.165/posts'，直接写'/api/posts'即可。
然后我们可以在main.js设置一个基础路径，这样你调用接口的时候可以不写api,直接写/接口名称即可。以下是一个使用范例：
this.$axios({
method: 'post',
url: '/api/comments',
data:this.$qs.stringify(d),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(function (res) {
console.log(res)
})
3、技术使用中遇到的问题和解决过程
常见的出现跨域问题的原因：
1、vue 项目安装了 ESLint：出现'err' is defined but never used (no-unused-vars)暴力解决：直接关闭 ESLint
在 package.json 文件中 添加
"rules": {
"generator-star-spacing": "off",
"no-tabs":"off",
"no-unused-vars":"off",
"no-console":"off",
"no-irregular-whitespace":"off",
"no-debugger": "off"
}2、如果关闭ESLint之后还有跨域问题，则可以使用以上的两种方法解决：
a、在服务器端设置跨域（见第二点技术详情）
b、在前端设置一个代理服务器（见第二点技术详情）3、设置完成之后，需要重启服务后，重新访问数据。
4、总结
虽然跨域问题解决得办法有两种，但是还是建议使用后端的解决方式工作量较少。
