背景说明:
本猿原来是java后端开发,最近公司和第三方公司有对接做了一个前端项目,由于以前没有接触过vue和node.js,在此记录一下vue跨域中遇到的问题;
开始开发时代码写完,在请求时发现请求第三方接口时报400错误,检查IP、端口、接口名都没有问题,网上搜了一下前端大神都说是需要设置跨域,在index.js文件中配置,代码如下:
proxyTable: {
'/users': {
target: 'http://128.17.***.***:**',
changeOrigin: true, //跨域
secure: false,
pathRewrite: {
'^/users': '/users'
}
},
'/token': {
target: 'http://128.17.***.***:**',//测试
changeOrigin: true, //跨域
secure: false,
pathRewrite: {
'^/token': '/token'
}
}
截图附上:
配置完后,在请求的地方改为:
this.axios.post('/token', params)
.then(function (value) {
accessToken = value.data.accessToken;
expiresIn = value.data.expiresIn;
console.log("获得令牌accessToken:"+value.data.accessToken);
console.log("获得令牌expiresIn:"+value.data.expiresIn);
if(accessToken != undefined){
getUserInfo(accessToken,code);
}
})
.catch(function (reason) {
console.log(reason);
});
设置完之后重启,再次请求,果然好用(也是慢慢摸索,苦逼很少写前端代码)。
本地开发环境好使了,然后打包升级到测试环境,发现请求报404,开始以为跨域设置的问题,对比了一下发现没有问题,然后仔细看一下前端报错:
发现请求第三方地址是测试环境的地址,地址有问提,请求的不是第三方的地址,想到了配置nginx配置代理:
location /users {
proxy_pass http://webserver6;
proxy_set_header HOST $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
#proxy_read_timeout 1800s;
#proxy_set_header Upgrade $http_upgrade;
#proxy_set_header Connection "Upgrade";
#proxy_http_version 1.1;
access_log logs/shunfeng.log postlog;
access_log logs/shunfengUrl.log main;
}
upstream webserver6{
server 128.17.***.**:** weight=1 max_fails=3 fail_timeout=3;
}
重启nginx,再次请求,成功!搞定。