Vue本地开发正向代理

在本地开发过程中，经常需要启动本地服务，访问服务器，然后请求数据或者发送数据。通过webpack启动本地服务访问目标服务器的时候会有跨域问题，我们应该如何解决？

在 Vue 官网中可以看到有一个 Vue-cli 全局配置 

在全局配置的时候推荐使用 vue config，也就是我们在通过 Vue-cli 脚手架搭建项目完成以后，会在根目录下创建一个 vue.config.js  

在 vue.config.js 中我们可以设置 webpack 或者 vue-cli 相关条件，我们可以在这个对象里写一个为 devServer 的 key ，这个 devServer 是 Vue-cli 向外暴露的一个对 webpack-dev-server 的配置接口，所以，用法跟 webpack-dev-server 一样。

webpack devServer webpack.js.org/configurati…

在对象里声明一个 proxy 的对象，对象里就是我们跨域的相关参数，正向代理跨域服务器。使用的是 html-proxy-middleware 这个包，他是一款 Node.js 代理中间件的包，想看实现原理的同学可以在项目的 node_modules 里找到，或者 github.com/chimurai/ht… 。

当我们所有请求都需要代理一个服务器的时候，proxy 就是一个指向开发环境 API 服务器的字符串。这会把我们项目所有请求代理到这个服务器上。

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000' // 代理目标服务器
  }
}

当我们项目当中不同的模块需要代理到不同服务器上的时候，比如有些模块后端尚未部署到开发或测试环境，只能通过后端本地访问到数据，我们就需要对不同模块请求进行不同代理。

module.exports = {
  devServer: {
    proxy: {
      '/api-getway': {  // 所有开头为 /api-getway 的请求地址都将转发到 target 目标服务器
        target: '<url>', // 代理的目标服务器
        ws: true, // 是否代理 websockets
        changeOrigin: true // 默认false，是否需要改变原始主机头为目标URL
      },
      '/api': {
        target:"http://102.8.0.10:8080/", // 后端本地服务
        pathRewrite: {
        '^/api': '/' // 当我们真实请求不需要携带 /api 的时候就需要重写路径 
        },
      },
      '/api/**': { // 通配符转发 具体可以看 micromatch 通配符 Glob 匹配模式
        target:"http://102.8.0.10:8080/", // 后端本地服务
      },
    }
  }
}

**那么问题来了，我配多个代理可以这样配么
**

module.exports = {
    devServer: {
      proxy: [
        { // 多重匹配转发 这样是错误的
            context: ['/auto-test','/cicd', '/monitor'],
            target:"http://102.8.0.10:8080/", // 后端本地服务
          },
      ]
    }
  }

**报错
**

**
**

什么意思，意思 proxy 在 package.json的时候必须是一个对象或者字符串

最后来说下配置代理的顺序，我们如果向如下配置代理

module.exports = {
devServer: {
    open: false,
    proxy: {
      '/api': {
        target: "http://102.8.0.10:8080/",
        changeOrigin: true,
      },
      '/bapi': {
        target: "http://102.8.0.10:8081/",
        changeOrigin: true,
      }, 
    }
  }
 }

当我们请求 “/bapi/api/getToken” 的时候，报错。

proxy 每个 key 在代理过程中都是以正则匹配的，所以当两个接口都有 /api 的时候，第一个请求会代理到 proxy 的第一个地址，所以当我们请求 “/bapi/api/getToken” 的时候其实是转发到第一个代理的地址。

解决方法：如果我们需要代理以 /api 开头的，要在 /api 之前写 ^。

module.exports = {
devServer: {
    open: false,
    proxy: {
      '^/api': {
        target: "http://102.8.0.10:8080/",
        changeOrigin: true,
      },
      '^/bapi': {
        target: "http://102.8.0.10:8081/",
        changeOrigin: true,
      }, 
    }
  }
 }

webpack devServer proxy webpack.js.org/configurati…