Vue配置多个跨域目标链接

参考：

https://segmentfault.com/a/1190000016199721

1、通过使用的http-proxy-middleware来实现跨域代理

  devServer: {

    disableHostCheck: true, //  新增该配置项

    port: 8666,

    publicPath, // 和 publicPath 保持一致

    open: false, //启动服务时自动打开浏览器访问

    proxy: {

      //开发环境代理配置

      // 配置前缀

      // '/dev-api': {

      [process.env.VUE_APP_BASE_API]: {

        //  目标服务器地址

        target: process.env.VUE_APP_SERVICE_URL,

        // target: process.env.VUE_APP_SERVICE_REAL_URL,

        changeOrigin: true, //开启代理转发

        pathRewrite: {

          // '^/dev-api': '',    //此设置将请求地址前缀 /dev-api 替换为空

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

        }

      },

      [process.env.VUE_APP_BASE_TEST_API]: {

        target: process.env.VUE_APP_SERVICE_TEST_URL,

        changeOrigin: true,

        pathRewrite: {

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

        }

      }

    }

  },

2、配置中主要参数说明：

2.1 '/api'

捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，
比如API请求/api/users, 会被代理到请求 http://www.baidu.com/api/users 。

2.2 target

代理的API地址，就是需要跨域的API地址。
地址可以是域名,如：http://www.baidu.com
也可以是IP地址：http://127.0.0.1:3000
如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。

2.3 pathRewrite

路径重写，也就是说会修改最终请求的API路径。
比如访问的API路径：/api/users,
设置pathRewrite: {'^/api' : ''},后，
最终代理访问的路径：http://www.baidu.com/users，
这个参数的目的是给代理命名后，在访问时把命名删除掉。

2.4 changeOrigin

这个参数可以让target参数是域名。

2.5 secure

secure: false,不检查安全问题。
设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器

2.6 其他参数配置查看http-proxy-middleware文档

其他的配置参数等信息，可以查看这里：https://github.com/chimurai/h...

巴特西