uni-app跨域问题仅存在于H5平台,因浏览器同源策略限制;小程序和App不触发跨域。开发阶段最稳解法是在manifest.json的顶层"h5"→"devServer"→"proxy"下配置代理,如"/api"代理至"http://127.0.0.1:3000",需设changeOrigin:true、pathRewrite:{"^/api":""},且必须重启服务生效。
uni-app 的跨域问题只在 h5 平台真实存在,其他平台(小程序、app)不走浏览器同源策略,所以根本不会触发跨域报错。你看到的“跨域错误”,99% 是因为当前运行环境是 h5,且请求地址和页面地址协议/域名/端口不一致。
manifest.json 里配 h5.devServer.proxy 是开发阶段最稳的方式
这是 HBuilderX 原生支持、无需额外依赖、改完重启即生效的方案。关键点全在路径和格式上:
-
h5.devServer.proxy必须写在manifest.json的顶层"h5"字段下,和"name"、"appid"同级,不是network.proxy(旧文档已过时) - 必须切换到「源码视图」编辑
manifest.json,可视化界面会清空自定义字段 -
target值必须带协议,比如"http://127.0.0.1:3000",不能只写"localhost:3000",否则启动时报Error: Invalid URL -
changeOrigin: true几乎必开——它会把请求头里的Host改成target的域名,否则 Express/Nginx 等服务端常因 Host 不匹配直接返回 404 -
secure: false是本地开发默认值,避免代理 HTTPS 目标时因证书校验失败报Error: self signed certificate -
pathRewrite写成{"^/api": ""}最常用:前端请求/api/user,代理后发往http://127.0.0.1:3000/user;不写就会发往.../api/user,后端没这个前缀就 404
vite.config.ts 里配 server.proxy 是更通用的开发方式
如果你用命令行 npm run dev:h5 启动(非 HBuilderX 内置运行),或者项目已接入 Vite 插件生态,那就该走 vite.config.ts 配置。注意:
- 配置位置是
defineConfig({ server: { proxy: { ... } } }),不是build或preview下 -
rewrite是函数,不是对象:rewrite: (path) => path.replace(/^\/api/, ''),正则里的/要转义 - proxy 只在
dev:h5生效,build:h5后的静态文件部署到 Nginx 时,必须另配反向代理,否则生产环境照样跨域 - 如果同时存在
manifest.json和vite.config.ts的 proxy 配置,HBuilderX 优先读manifest.json,但命令行启动时只认vite.config.ts
为什么改了配置还是报跨域?常见失效原因
代理不生效,90% 是因为没满足以下任一前提:
- 没重启开发服务:改完
manifest.json或vite.config.ts后,必须点「停止运行」再「运行到浏览器」,热更新不重载 proxy 规则 - 访问的不是开发服务器地址:你在浏览器手动打开
dist/index.html,或双击 HTML 文件,代理完全不工作;必须访问http://localhost:8080(或你配的h5.devServer.port) - 请求路径没匹配上代理规则:比如配了
"/api",但代码里写的是uni.request({ url: "/user" }),就不会被代理 - 目标服务没起来,或
target地址写错:浏览器控制台 Network 面板里看请求是否发到了代理地址(如http://localhost:8080/api/user),再看响应状态是不是 504 —— 那基本就是 target 连不上
真正容易被忽略的点是:跨域只在 H5 存在,而很多人在微信小程序里遇到请求失败,第一反应是“跨域”,其实是没去微信公众平台后台配置 request 合法域名。这时候加任何 proxy 都没用,因为请求压根没发出去。


















