uniapp运行时遇到CORS策略阻塞：No 'Access-Control-Allow-Origin'如何解决？

在uniapp开发过程中，请求接口时遇到CORS跨域问题，控制台报错"No ‘Access-Control-Allow-Origin’ header is present on the requested resource"。项目在H5端运行时正常，但打包成APP后出现此问题。尝试过配置manifest.json的networkTimeout和uni.request的header参数都无效。请问在uniapp中如何彻底解决APP端的跨域请求问题？是否有需要特殊配置的地方？

2 回复

在uniapp中解决CORS问题的方法：

  1. 开发阶段：配置manifest.json中的h5.devServer.proxy代理
  2. 生产环境：让后端配置CORS头Access-Control-Allow-Origin
  3. 临时方案：使用jsonp请求（仅限get请求）
  4. 终极方案：部署自己的代理服务器中转请求

建议优先采用后端配置CORS或使用代理方案。


在 UniApp 中遇到 CORS（跨域资源共享）策略阻塞，通常是因为浏览器安全机制限制了跨域请求。以下是几种解决方案：

1. 配置后端服务器

  • 在后端服务器添加 CORS 头，允许你的域名访问。例如：
    Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
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, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

2. 使用 UniApp 的本地代理（仅限开发环境）

  • 在 manifest.json 中配置代理，避免浏览器直接跨域：
    "h5": {
  "devServer": {
    "proxy": {
      "/api": {
        "target": "https://your-api-domain.com",
        "changeOrigin": true,
        "pathRewrite": { "^/api": "" }
      }
    }
  }
}
  • 请求时使用 /api 路径，代理会自动转发到目标服务器。

3. 部署到生产环境

  • 将前端和后端部署到同一域名下，避免跨域问题。
  • 或通过服务器配置（如 Nginx）反向代理：
    location /api/ {
    proxy_pass https://your-api-domain.com/;
    add_header Access-Control-Allow-Origin *;
}

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

  • 如果后端支持 JSONP，可临时解决 GET 请求跨域问题，但不推荐用于复杂场景。

注意事项：

  • 生产环境必须由后端或服务器解决 CORS，前端代理仅用于开发。
  • 确保请求方法（如 POST）和头部（如 Content-Type）符合 CORS 预检要求。

根据你的环境选择合适方案，优先推荐后端配置 CORS 头或部署同一域名。

回到顶部