uniapp h5跨域问题如何解决

在使用uniapp开发H5应用时遇到跨域问题，应该如何解决？具体场景是在请求第三方API接口时浏览器提示跨域错误，尝试了配置manifest.json的h5->devServer->proxy代理，但似乎没有生效。请问正确的跨域解决方案是什么？是否有需要特别注意的配置项或服务器端需要配合的设置？

2 回复

在manifest.json中配置代理，或在服务端设置CORS允许跨域。H5端本地开发时可用devServer代理，上线后需服务端配合。


在 UniApp 的 H5 平台中，跨域问题通常发生在开发阶段，因为浏览器安全策略限制了不同源（域名、端口、协议）的请求。以下是几种解决方法：

1. 配置本地开发服务器代理（推荐开发阶段使用）

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

代码示例（manifest.json）：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "https://your-api-domain.com",
          "changeOrigin": true,
          "secure": false,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
}
  • 说明：请求 /api/user 会被代理到 https://your-api-domain.com/user。
  • 重启开发服务器生效。

2. 后端设置 CORS 头（生产环境必需）

在生产环境中，必须让后端服务器配置 CORS（跨域资源共享）头，允许你的 H5 域名访问。

示例响应头：

Access-Control-Allow-Origin: https://your-h5-domain.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

3. 使用 JSONP（仅限 GET 请求）

如果后端支持 JSONP，可用于 GET 请求（不推荐用于复杂场景）。

代码示例：

uni.request({
  url: 'https://api.example.com/data?callback=handleResponse',
  dataType: 'jsonp',
  success: (res) => {
    console.log(res.data);
  }
});

4. 部署到同域环境

将 H5 页面和 API 部署在同一域名下，从根本上避免跨域问题。

注意事项：

  • 开发阶段：优先使用代理配置。
  • 生产环境：必须通过后端 CORS 或同域部署解决。
  • 跨域问题仅影响浏览器环境，App 和小程序平台不受限制。

选择适合你项目阶段的方法即可快速解决问题。

回到顶部