uniapp cors error 如何解决

在uniapp开发中遇到跨域请求报错(CORS error)，具体表现是请求接口时浏览器控制台提示"Access-Control-Allow-Origin"错误。尝试在manifest.json里配置了h5->devServer->proxy代理，但生产环境仍然报错。想知道在uniapp中解决跨域问题的完整方案，包括开发环境和打包后的H5版本该如何配置？是否需要后端配合修改响应头？

2 回复

uniapp 跨域问题解决方案：

  1. 开发环境：

    • 在 manifest.json 中配置代理：
    "h5": {
  "devServer": {
    "proxy": {
      "/api": {
        "target": "http://your-api.com",
        "changeOrigin": true
      }
    }
  }
}

  2. 生产环境：

    • 让后端配置 CORS 头：
    Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,PUT,DELETE

  3. 其他方案：

    • 使用 nginx 反向代理
    • 后端设置允许跨域
    • 使用云函数中转请求

注意：真机调试时建议关闭浏览器安全策略，或使用正式环境测试。


在 UniApp 中遇到 CORS（跨域资源共享）错误通常是因为浏览器安全策略阻止了跨域请求。以下是几种常见的解决方法：

1. 使用 HBuilderX 内置浏览器调试

  • 在开发阶段，使用 HBuilderX 的内置浏览器进行调试，它默认禁用了 CORS 限制。
  • 如果仍有问题，检查是否开启了「忽略跨域限制」选项（在运行配置中设置）。

2. 配置服务器端支持 CORS

  • 如果是请求自己的服务器，确保服务器配置了正确的 CORS 头：
    Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
  • 示例（Node.js/Express）：
    app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

3. 使用代理服务器（开发环境）

  • 在 manifest.json 中配置代理，将跨域请求转发到同域：
    {
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "https://your-api-domain.com",
          "changeOrigin": true,
          "secure": false
        }
      }
    }
  }
}
  • 重启开发服务器后，请求 /api 路径会被代理到目标地址。

4. 生产环境解决方案

  • 部署到同域名下：确保前端和后端部署在相同域名下，避免跨域。
  • 使用云函数或中间层：通过云函数（如uniCloud）或自建中间层转发请求，绕过浏览器限制。

5. 检查请求配置

  • 在 UniApp 的 uni.request 中，确保 url 正确，并检查是否有特殊头信息触发了预检请求（OPTIONS）。

注意事项：

  • 本地开发时优先用代理或内置浏览器。
  • 生产环境务必通过服务器配置或同域部署解决。
  • 如果使用第三方接口，确认其是否支持跨域，否则需通过代理访问。

根据你的环境选择合适的方法即可解决 CORS 问题。

回到顶部