前端vue项目中axios解决跨域问题
1.在main.js中,axios下面添加如下代码:
axios.defaults.baseURL = "/api";
axios.defaults.headers.post["Content-Type"] = "application/json";
2.在config文件夹下的index.js中,dev中添加如下代码:
proxyTable: {
"/api": {
//域名根据自己需求,我这里用百度的测试
target: "https://aip.baidubce.com/",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
},
3.在main.js中,调用axios如下代码:
axios({
// 不需要传入刚才该的target里写的域名,直接写后面内容就ok了
url: "oauth/2.0/token",
// 默认get请求
// 可以用params传参
params: {
grant_type: "XXX",
client_id: "XXX",
client_secret: "XXX"
}
}).then(res => {
console.log(res);
});
原理:因为我们给url加上了前缀/api,我们访问oauth/2.0/token就当于访问了:localhost:8080/api/oauth/2.0/token(其中localhost:8080是默认的IP和端口)。在index.js中的proxyTable中拦截了/api,并把/api及其前面的所有替换成了target中的内容,因此实际访问Url是https://aip.baidubce.com/oauth/2.0/token?grant_type=…。