Vue 开发和生产环境的跨域

背景

在 Vue 项目的开发过程中，我们经常会遇到跨域请求的问题，如果不做处理，这个问题就会影响项目的开发进度。

解决办法

• 开发环境
  在 vue.config.js 文件中的 devServer 字段配置 proxy：

module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production',

  productionSourceMap: false,

  devServer: {
    // ...
    proxy: {
      '/api': {
        target: 'xxx',
        changeOrigin: true
      }
  }
}

• 生产环境
  通过 nginx 进行配置：

location /api {
    proxy_pass xxx/api;
  }