自从vue2.0不再更新vue-resource，便出现了axios，这里附上axios的官网：https://www.npmjs.com/package/axios，里面的文档也很详细，安装这里就不说了，大家可以自己去官网看看，今天主要讲讲axios的跨域解决方法。
解决的方式有两种：
一、让后端设置CORS，允许我们请求。
二、前端在webpack中设置proxyTable{}代理。
我们今天着重讲第二种：proxyTable{}代理。
前端的地址为http://localhost:8080，后端的接口地址是http://www.sener.com/login， 这就违反了浏览器的同源策略，所以会报如下错误提示，
http状态码为403（权限不足）：
打开vue项目config文件夹下的index.js在里面把proxyTable: {}设置成下面的：
proxyTable: {
'/api': {
target: 'http://www.sener.com', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/api': '' //这是一个通配符，设置完了之后每个接口都要在前面加上/api（特别注意这一点）
}
}
},
接口调用方法：
axios.post("/api/login", {
userName: "zhangsan",
password: "111111"
}).then(function (response) {
console.log(response);
}).catch(function (err) {
console.log(err);
});
写完后重启项目，应该就可以代理成功了。
至于为什么会存在跨域这个问题，以下是我个人的一点理解，希望各位大佬可以提提建议。
首先，axios 发送请求时的数据默认是 JSON 格式的，这是导致用 axios POST 跨域出错的主要原因。
根据 CORS 的标准，当浏览器发送跨域请求时，如果请求不是GET或者特定POST（Content-Type只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain的一种）时，强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request)，从而获知服务器端对跨源请求所支持 HTTP 方法。
所以，使用 axios 直接发送 POST 的跨域请求，如果web后端对 OPTIONS 的响应有问题，就会报错。
至于为何 XHR 可以，我觉得跟form-urlencoded这种数据格式有关。
这里附上CORS的补充：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#
网友评论