uniapp 反向代理如何配置和使用

在uniapp中如何配置和使用反向代理？我在开发过程中遇到了跨域问题，想通过反向代理来解决，但不知道具体该怎么操作。能否详细说明下在uniapp项目中配置反向代理的步骤？是否需要修改manifest.json文件或者单独配置？另外，反向代理配置好后，在正式部署时需要注意哪些问题？

2 回复

在uniapp中配置反向代理，需在manifest.json的h5选项中设置devServer.proxy。例如将/api代理到http://localhost:3000，代码示例：

"h5": {
  "devServer": {
    "proxy": {
      "/api": {
        "target": "http://localhost:3000",
        "changeOrigin": true
      }
    }
  }
}

仅开发环境生效，生产环境需通过nginx等服务器配置。


在 UniApp 中配置反向代理主要用于开发阶段的跨域请求调试，通过代理将 API 请求转发到目标服务器。以下是具体配置和使用方法：

配置步骤（以 HBuilderX 为例）

  1. 打开项目根目录的 manifest.json 文件
    选择「源码视图」，在 "h5" 节点下添加 "devServer" 配置：
    "h5": {
  "devServer": {
    "proxy": {
      "/api": {
        "target": "https://your-target-server.com",
        "changeOrigin": true,
        "secure": false,
        "pathRewrite": {
          "^/api": ""
        }
      }
    }
  }
}

参数说明

  • target: 需要代理到的目标服务器地址。
  • changeOrigin: 修改请求头中的 Origin 为目标地址（通常设为 true）。
  • secure: 若目标服务器使用 HTTPS 且证书无效，可设为 false 跳过验证。
  • pathRewrite: 重写请求路径（例如将 /api/user 变为 /user）。

代码中使用

在 UniApp 中直接使用相对路径发起请求即可：

uni.request({
  url: '/api/user/list', // 开发阶段会被代理到 https://your-target-server.com/user/list
  success: (res) => {
    console.log(res.data);
  }
});

注意事项

  1. 仅开发环境生效：此配置仅在 H5 开发调试时有效，生产环境需通过服务器配置代理或直接调用正式接口。
  2. 多代理配置：可配置多个代理规则，匹配不同路径：
    "proxy": {
  "/api1": { "target": "https://server1.com" },
  "/api2": { "target": "https://server2.com" }
}
  3. 重启服务：修改配置后需重启 HBuilderX 调试服务。

生产环境解决方案

  • 部署时使用 Nginx 等服务器配置反向代理。
  • 或直接使用绝对路径请求生产环境接口。

通过以上配置，即可在开发阶段解决跨域问题，简化前后端联调流程。

回到顶部