Skip to main content

本地 Proxy 方案

本地开发场景下，访问页面的 url 是 http://127.0.0.1:3333，但是后端接口可能是其他 ip、域名或端口，此时就会产生跨域问题，导致无法调试，针对这个问题推荐两种代理方式：

  1. 访问前端页面地址代理后端接口：访问 npm start 启动的页面地址 http://127.0.0.1:3333，然后将页面中发出的请求代理到前端调试服务（devServer），然后通过调试服务向后端发起实际的接口请求
  2. 访问后端页面地址代理前端资源：访问后端服务提供的页面 url 地址，此时页面中通常加载的都不是本地调试的前端资源，因此无法联调，需要通过工具进行资源地址的代理
维度\方案访问前端页面地址代理后端接口访问后端地址代理前端资源
浏览器中打开的页面地址http://127.0.0.1:3333用户真实访问的地址如：https://taobao.com
是否支持接口鉴权不支持（本地页面没有用户信息）支持
是否依赖后端服务弱依赖（只有接口）强依赖（页面+接口）

两种方式的优缺点如上，开发者按需选择一个即可。接下来介绍两种方案具体的操作方式。

访问前端调试地址代理后端接口​

配置 proxy 字段​

在 build.json 中配置 proxy 字段：

{
  "proxy": {
      "/api": {
      "enable": true,
      "target": "http://127.0.0.1:6001"
    }
  }
}

页面中发出的所有 /api 开头的接口都会被代理到 http://127.0.0.1:6001。proxy 完整的配置项请参考 http-proxy-middleware。

匹配规则​

         foo://example.com:8042/over/there?name=ferret#nose
         \_/   \______________/\_________/ \_________/ \__/
          |           |            |            |        |
       scheme     authority       path        query   fragment
  • / 匹配所有规则
  • /api 匹配 path 以 /api 开头的路径

请求示例​

request({
  url: '/api/proxy',
  method: 'get',
});

请求发出后将会被代理到 http://127.0.0.1:6001/api/proxy，代理成功后可在 network 面板看到对应的信息：

访问后端地址代理前端资源​

直接访问后端服务提供的页面 url 地址，然后将页面中加载的资源代理成本地调试的资源，推荐两种方案：

  1. 推荐：通过 icejs 插件 build-plguin-smart-debug
  2. chrome 插件 xswitch