uniapp配置跨域如何实现

在uniapp开发过程中，如何配置跨域请求？我在本地调试时遇到接口跨域问题，尝试在manifest.json里配置代理但没生效。请问正确的跨域解决方案是什么？是否需要同时配置HBuilderX和服务器端？

2 回复

在manifest.json中配置devServer的proxy，或在HBuilderX中勾选跨域设置。生产环境需后端支持。


在 UniApp 中配置跨域主要涉及开发阶段的本地调试和运行时的跨域请求处理。以下是具体实现方法：

1. 开发阶段（HBuilderX 内置浏览器调试）

在 manifest.json 文件中配置代理：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://your-api-domain.com",
          "changeOrigin": true,
          "secure": false,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
}

配置后，本地请求 /api/user 会被代理到 http://your-api-domain.com/user。

2. 生产环境跨域处理

  • 后端配置 CORS：让后端设置响应头 Access-Control-Allow-Origin 允许你的域名。
  • 使用 Nginx 反向代理：通过 Nginx 配置代理转发请求。
  • JSONP：仅支持 GET 请求，不推荐用于复杂场景。

3. 注意事项

  • 跨域是浏览器安全策略，App 端（打包成 Android/iOS）不存在跨域问题。
  • 小程序端需在后台配置合法域名。

示例请求代码

uni.request({
  url: '/api/user', // 开发阶段使用代理路径
  method: 'GET',
  success: (res) => {
    console.log(res.data);
  }
});

总结：开发阶段用 manifest.json 配置代理，生产环境通过后端或服务器解决跨域。

回到顶部