Vue项目中的跨域问题（开发环境、生产环境）

刚工作两个月，公司项目的代码还没接触明白，今天偶然看到了前端项目中vue.config.js对于后台接口的配置

  devServer: {
    port: port,
    open: false,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080/ShaoxingBackend/`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
    // after: require('./mock/mock-server.js')
  },

proxy应该是配置跨域，其中VUE_APP_BASE_API有两个地方用到，分别在生产环境和开发环境中：

 

 但是我还看到nginx服务器的配置也有跨域相关的

location /prod-api {
       proxy_pass http://localhost:8080/xxx;
       client_max_body_size 200m;
    }

但是vue中不是已经包含了吗？带着这个问题，我把nginx的这段配置注释掉，重启。结果是：

 

 所以vue中的生产环境的跨域是没有解决的，于是我搜索了一些关于vue.config配置跨域的博文，算是理解了。

https://blog.csdn.net/LEGLO_/article/details/96712706

总结：vue.config.js中配置的proxy跨域只对本地开发环境生效，打包之后还是要在nginx/其他代理服务器上配置跨域。

刚接触点皮毛，见识短浅，欢迎补充指正！