@vue/cli 在开发环境下与后端联调配置跨域

vue.config.js文件配置

  devServer: {
    proxy: {
      '/api': {  // 这里的/api就是axios的baseURL
        target: 'http://127.0.0.1:8080', // 请求的接口域名
        ws: true, //如果要代理 websockets，配置这个参数
        changeOrigin: true,  //开启跨域
        pathRewrite: {  
          '^/api': ''    // 替换target中的请求地址
        }
      }
    }
  }
}

理解vue中proxy配置的含义：当我们从localhost:8080请求localhost:3000的数据时，因为浏览器的同源策略，会出现跨域无法成功请求的情况，但是通过运行vue项目而本地开启的node服务器是可以进行请求的，所以我们将localhost:9000的数据请求代理到node本地运行环境中从而进行请求3000端口的数据。

注：vue项目中配置的proxy只是对于开发环境中将的localhost请求代理到www.xxx.com，当项目发布到生产环境则是走nginx代理服务器，项目中的proxy配置无效。