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

首先我们在本地开发，域名都是localhost，当我们需要请求后台数据时，就会出现跨域的问题。

下面就是在 vue.config.js 配置文件里：

devServer: {
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      '/api': {
        target: `http://10.24.4.214:8098/api`,
        changeOrigin: true,
        pathRewrite: {
          '^/api' : ''
        }
      }
    }
}

/api 表示需要去匹配请求时的 url，然后替换成 target 的值：

比如你页面里是写的

axios.post('/api/list/gd')

最终 node 去请求后台的地址是：http://10.24.4.214:8098/api/list/gd

但是你在浏览器里看到的还是：http://localhost:8888/api/list/gd，这时候就不存在跨越的问题的，node 服务已经代理拿到数据了。

其实真正引起跨越问题是浏览器的安全机制