uniapp运行到浏览器h5一直提示跨域该如何解决

在使用uniapp开发时，运行到浏览器H5模式一直提示跨域错误，导致接口请求失败。尝试了配置manifest.json中的h5->devServer->proxy代理，但问题依旧存在。请问该如何正确解决uniapp H5模式的跨域问题？是否需要其他配置或修改请求方式？

2 回复

在uni-app的manifest.json中配置代理，或在HBuilderX中勾选“跨域代理”。本地开发时也可用浏览器插件临时解决。


在UniApp中运行到H5时遇到跨域问题，可以通过以下方法解决：

1. 配置本地代理（推荐）

在 manifest.json 文件中配置代理，将API请求转发到目标服务器，绕过跨域限制。

步骤：

  • 打开 manifest.json，在 "h5" 字段下添加 "devServer" 配置：
{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "https://your-api-domain.com", // 替换为实际API地址
          "changeOrigin": true,
          "secure": false,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
}
  • 重启开发服务器，代码中请求 /api/xxx 会被代理到 https://your-api-domain.com/xxx。

2. 后端设置CORS响应头

如果后端可控，添加以下响应头允许跨域访问：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

3. 使用浏览器插件临时解决

开发阶段可安装浏览器插件（如 Chrome 的 “Allow CORS”）临时禁用跨域检查。

4. 生产环境部署配置

部署到服务器时，通过 Nginx 或云服务商配置反向代理：

location /api/ {
  proxy_pass https://your-api-domain.com/;
}

注意事项：

  • 本地代理仅开发环境有效，生产环境需通过服务器配置或后端解决。
  • 确保请求地址与代理配置路径匹配，例如代码中写 /api/user 会被代理到目标地址的 /user。

选择适合当前开发阶段的方法即可快速解决问题。

回到顶部