uniapp跨域问题如何解决

在使用uniapp开发过程中遇到跨域问题该如何解决？我尝试请求不同域名的接口时，控制台总是提示跨域错误。在H5端使用axios请求时能正常返回数据，但打包成APP后请求就失败了。请问在uniapp中有什么好的解决方案吗？是否需要在manifest.json中配置？或者需要使用uni.request的特定参数？希望有经验的朋友能分享下具体的处理方法和注意事项。

2 回复

在manifest.json中配置代理，或使用HBuilderX内置浏览器调试。后端设置CORS允许跨域，或部署到服务器用nginx反向代理。


在 UniApp 中，跨域问题主要出现在开发阶段的 H5 平台，因为浏览器会强制执行同源策略。以下是解决方法：

1. 开发阶段：配置 manifest.json

在 H5 平台下，通过修改 manifest.json 文件配置代理，避免浏览器跨域限制：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://your-api-domain.com",
          "changeOrigin": true,
          "secure": false,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
}
  • 说明：将 /api 开头的请求代理到目标服务器（如 http://your-api-domain.com），仅适用于开发环境。

2. 生产环境解决方案

  • 后端配置 CORS：
    让后端服务器设置响应头，允许你的域名访问：
    Access-Control-Allow-Origin: https://your-domain.com
  • 使用云函数或中间层：
    通过云开发（如 uniCloud）或自建代理服务器转发请求，避免直接跨域。

3. 其他平台注意事项

  • 小程序/App 平台无跨域限制，但需确保域名在安全列表中（如小程序需配置 request 合法域名）。

总结

  • 开发阶段用 devServer 代理。
  • 生产环境依赖后端配置 CORS 或通过代理/云函数中转。
  • 非 H5 平台需配置对应白名单。

根据实际环境选择合适方案即可快速解决问题。

回到顶部