Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘

vue项目在开发环境下出现了跨域问题，在vue.config.js中配置了跨域，但没有生效。配置如下：

module.exports = {
  publicPath: './',
  devServer:{
    proxy:{
      '/api':{        
        target:'http://xxx',
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }
      }
    }
  },
  //去掉map文件
  productionSourceMap: false,
}

原因在哪里呢？

此vue项目用了.env .env.prod文件来配置开发环境和生成环境域名，在.env文件中配置了和vue.config.js中target相同的域名。配置如下
 

NODE_ENV=development

VUE_APP_HOST=http://xxx

这样axios在请求时，baseURL就为.env配置的地址为http://xxx   导致vue.config.js配置的代理无效。

解决方案如下：

修改.env文件

NODE_ENV=development

VUE_APP_HOST=/api

这样axios请求时，baseURL就为.env配置的地址为/api 这样vue.config.js配置的代理就生效了。