在 vue.config.js 项目中配置 proxy 解决跨域问题(Vue)
在实现前端应用和后端 API 服务器没有运行在同一个主机上,需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
解决方式:
通常是在vue.configh.js中去对proxy进行配置普通代理方式
module.exports = {
devServer: {
proxy: {
'^/api': {
ws: true, //是否启用websockets
changeOrigin: true, //开启代理: 在本地会创建一个虚拟服务端,然后发送请求数据,并且同时接收请求数据,这样客户端和服务端进行数据的交互就不会有跨域问题
target: '' // 要访问的跨域的域名
}
}
},
}
/api 表示需要去匹配请求时的 url,然后替换成 target 的值:
比如你页面里是写的
axios.post('/api/list/gd')
最终 node 去请求后台的地址是:http://*************/api/list/gd
但是你在浏览器里看到的还是:http://localhost:8888/api/list/gd,这时候就不存在跨越的问题的,node 服务已经代理拿到数据了。