uniapp 配置跨域如何实现

在uniapp开发中遇到跨域请求问题，请问应该如何配置跨域？我尝试在manifest.json里配置代理，但实际请求还是被浏览器拦截了。有没有完整的配置示例？需要在H5端和APP端分别处理吗？

2 回复

在 manifest.json 的 h5 配置中添加 devServer 字段：

"h5": {
  "devServer": {
    "proxy": {
      "/api": {
        "target": "http://your-api.com",
        "changeOrigin": true,
        "secure": false
      }
    }
  }
}

注意：仅开发环境生效，生产环境需后端配置 CORS。


在 UniApp 中配置跨域主要涉及开发阶段的调试，因为 UniApp 编译后运行在原生环境（如 App、小程序）时不受浏览器同源策略限制。以下是实现方法：

1. 开发阶段（H5 平台）

在 manifest.json 文件中配置 devServer 代理：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "https://your-api-domain.com",
          "changeOrigin": true,
          "secure": false,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
}
  • target：后端 API 地址
  • changeOrigin：修改请求头中的 Origin
  • pathRewrite：重写请求路径（可选）

2. 生产环境（H5 平台）

  • 部署时需通过 Nginx 等服务器配置反向代理
  • 或让后端配置 CORS 响应头：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Headers: Content-Type,Authorization

3. 小程序/App 平台

  • 无需跨域配置，但需在对应平台设置合法域名：
    • 微信小程序：登录后台配置 request 合法域名
    • App：无限制，但需注意 HTTPS 要求

注意事项：

  1. 配置后重启开发服务器生效
  2. 生产环境 H5 需确保代理或 CORS 正确配置
  3. 小程序需通过审核后方可使用配置的域名

通过以上方法即可解决 UniApp 开发和生产环境的跨域问题。

回到顶部