vue中proxy配置及理解

今天被vue中proxy配置困扰了一天，记录一下。

项目中需要和两个不同的后台服务器接口进行响应，在开发过程中将第二个服务器接口默认写死了：http://www.beehub.paradeum.com/api/xxx  但是项目在生产环境中面临需要匹配https的情况，不能采用写死请求路径的情况，在项目大佬修改之后终于成功了，代码及使用如下：

vue.config.js

 proxy: {

      // change xxx-api/login => mock/login

      // detail: https://cli.vuejs.org/config/#devserver-proxy

      [process.env.VUE_APP_BASE_API]: {

        target: "http://api.beehub.paradeum.com",

        changeOrigin: true,

        pathRewrite: {

          ["^" + process.env.VUE_APP_BASE_API]: ""

        }

      },

      "/gateway": {

        target: "http://api2.beehub.paradeum.com",

        changeOrigin: true,

        secure: false

      }

    }

  },

 upload.vue

 axios.post('/gateway/api/query', fd, config)

到此，将gateway的请求从localhost代理到了beehub.paradeum.com 

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

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