@Vue/CLI 开发前端项目时跨域访问后端服务器
问题
出于安全等方面的考虑，浏览器采用了同源策略，即当两个页面具有相同的协议（protocol），主机（host）和端口号（port）时，这两个页面“同源”；否则为“非同源”。当通过一个页面直接访问另一个非同源的页面时，浏览器是同源策略不允许的，控制台会报带有“Access-Control-Allow-Origin”的错误，这就是遇到了“跨域”问题，或者更专业地说，跨域资源共享（CORS，Cross-origin resource sharing）问题。
当时用vue.js 作为前端框架进行开发时，一般是采用前后端分离的方式，在约定好接口的情况下，前端与后端可以分别各自独立开发。所谓分久必合，在开发到一定程度后，前后端需要联调时，就需要将两者结合起来，前端要通过ajax 方式向后端去请求数据。这时，往往就需要跨域请求数据。用@Vue/CLI 开发的项目，常用axios 发起ajax 请求，具体用法可参考 https://www.qcloud.fun/2020/04/09/vue-cli-use-axios/ 。
解决办法
@Vue/CLI 项目可以通过配置Webpack 开发服务器选项（ Webpack devServer options），来实现跨域访问后端页面 。编辑vue项目根目录下的vue.config.js文件（没有就自行创建一个），在devServer的proxy配置中跨域 ：
// vue.config.js：
module.exports = {
devServer: {
proxy: {
// 将所有 '/api' 开头的请求进行代理
'/api': {
target: 'http://www.target.com:8000',
changeOrigin: true,
pathRewrite: {
/* 重写路径，请求的地址为 'http://127.0.0.1:8080/api/some/data' 时
实际上会从 'http://121.121.67.254:8185/some/data' 请求数据，即'^/api' 被替换为''，
而 'http://127.0.0.1:8080' 会被替换为target中的 'http://www.target.com:8000'
*/
'^/api': ''
},
// 如果需要处理cookie
cookieDomainRewrite: {
'www.target.com': '127.0.0.1'
}
}
}
}
}
设置完后，重启前端服务即可。
另外，还可以结合main.js中的 axios.defaults.baseURL 属性配置来设置请求 默认的基础URL，这样在切换生产系统时会比较方便。
冀公网安备 13010402001886号