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/其他代理服務器上配置跨域。

剛接觸點皮毛，見識短淺，歡迎補充指正！