错误:开发环境下的本地vue项目请求获取服务器上的api,服务器上的api不对外开放,只允许内部访问,报错出现跨域访问请求的错误
解决:
1、首先,在本地vue项目中的config/index.js中在proxyTable中添加服务器的地址;
proxyTable: {//开发环境下的跨域问题解决
'/api': {
target: 'http://192.xxx.xxx.xxx:8080', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http://192.xxx.xxx.xxx:8080' //路径重写
}
}
},
2、在服务器的nginx中,路径/ect/nginx,修改配置文件xxx.conf
注意:proxy_pass代理的是服务器接口的ip地址, http://localhost:8014是我服务器上的接口对应的端口
location /api/ {
proxy_pass http://localhost:8014/;
add_header Access-Control-Allow-Origin *;
}
然后,记得重启nginx;
3、post调取接口,刷新本地的页面
userLogin(loginJson).then(response => {
console.log(response)
api/index.js下
/*登陆系统*/
export const userLogin = params => { return axios.post(`/api/auth/login`, params)};