uniapp跨域请求报错：Access to XMLHttpRequest at '' from origin 'http://localhost:3800' 如何解决？

我在使用uniapp开发时遇到跨域请求报错：Access to XMLHttpRequest at ‘’ from origin ‘http://localhost:3800’。尝试请求后端接口时浏览器控制台提示跨域错误，已经确认后端接口是正常的。在H5环境下运行项目，请问该如何解决这个跨域问题？是否需要配置uniapp的manifest.json或者后端设置CORS？求具体解决方案。

2 回复

在manifest.json的h5配置中添加devServer代理：

"h5": {
  "devServer": {
    "proxy": {
      "/api": {
        "target": "你的接口地址",
        "changeOrigin": true
      }
    }
  }
}

在 UniApp 中，跨域请求报错通常是由于浏览器的同源策略限制导致的。以下是几种常见的解决方法：

1. 配置 H5 端跨域代理（开发环境）

在 manifest.json 文件中配置 H5 端的 devServer 代理，适用于本地开发环境。

步骤：

  • 打开 manifest.json 文件。
  • 在 "h5" 字段下添加 "devServer" 配置。

示例代码：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://your-api-domain.com", // 替换为实际后端地址
          "changeOrigin": true,
          "secure": false,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
}
  • 配置后，前端请求 /api/xxx 会被代理到 http://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. 使用云函数或服务器中转

如果后端无法修改，可以通过云函数（如 uniCloud）或自建服务器代理请求，避免直接跨域。

4. 打包成 App 或小程序

在 App 或小程序环境中，默认无跨域限制，可直接请求。

注意：

  • 以上方法 1 仅适用于 H5 开发环境，打包后无效。
  • 生产环境建议优先采用后端 CORS 或代理方案。

根据你的需求选择合适的方法即可解决跨域问题。

回到顶部