在 vue.config.js 项目中配置 proxy 解决跨域问题（Vue）

在 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 服务已经代理拿到数据了。

https://zhuanlan.zhihu.com/p/403326985