前台关于跨域的警告A cookie associated with a cross-site resource at …,代理服务器
A cookie associated with a cross-site resource at …
解决该警告的方法:
在配置文件中添加配置如下:
"proxy": {"/api": {"target": "http://112.125.26.100:8000/","changeOrigin": true,"pathRewrite": { "^/api" : "" }}
}
添加之后,当识别到 /api 就会跳转到target指向的网址。
例如:后台接口是http://123.123.23.123:8000/index/user,
请求的时候:/api/index/user 就可以了
changeOrigin 有跨域情况,配置true;
pathRewrite 如果你的实际接口中没有/api,则需要配置该属性,在最终请求的时候消除/api
如果配置到正式环境,这个跨域就没有必要了。所以建议判断当前的环境来决定是否需要该代码。所以在vue.config.js中
let isDev = process.env.NODE_ENV; //当前的环境
...
proxy: {"/api": {target: "http://112.125.26.128:8000/",changeOrigin: isDev==='development'?true:false,pathRewrite: { "^/api": "" }}}...
在main.js中另外的请求时候的API地址同样需要判断:
const isDev = process.env.NODE_ENV;
let APIHost = '';
if(isDev==='development'){APIHost = '/api';
}else{APIHost = 'http://112.125.26.128:8000/';
}
结果:
开发环境(本地环境):
生产环境(正式环境):
如此都不会有跨域的警告出现