UniApp H5跨域本质是浏览器同源策略拦截,须在manifest.json的"h5"→"devServer"→"proxy"层级下配置代理,配合changeOrigin、pathRewrite(字符串正则)等参数,使uni.request经本地服务器中转请求,绕过限制。

UniApp H5端跨域问题,本质是浏览器同源策略拦截,不是代码写错了,也不是后端挂了——只要在 manifest.json 里配对代理规则,uni.request 发请求时走本地开发服务器中转,就能绕过限制。其他方案(比如改后端CORS、用 vue.config.js)在UniApp里要么不生效、要么被覆盖,优先级和兼容性都不如官方推荐的 manifest.json 配置。
manifest.json 的 proxy 必须放在 "h5" → "devServer" 下
很多人把 proxy 直接塞进 "network" 或顶层 "h5" 字段,结果完全不生效。UniApp 从 2.7+ 开始明确要求:H5 开发代理必须嵌套在 "h5" → "devServer" 对象内,否则启动时会被忽略。
-
"h5"节点外的"proxy"(比如旧文档里写的"network.proxy")已废弃,HBuilderX 3.9+ 不再识别 - 配置路径必须是完整层级:
"h5": { "devServer": { "proxy": { ... } } } - 如果项目用了自定义端口,记得同步配
"port",否则代理可能监听错端口
正确示例:
{
"name": "my-app",
"h5": {
"devServer": {
"port": 8080,
"proxy": {
"/api": {
"target": "http://localhost:3000",
"changeOrigin": true,
"pathRewrite": { "^/api": "" }
}
}
}
}
}
pathRewrite 的正则必须用字符串字面量,不能写成 RegExp 对象
pathRewrite 是代理转发前重写 URL 路径的关键,但 UniApp 的底层代理库(基于 http-proxy-middleware)只接受字符串形式的正则表达式,写成 /^/api/ 或 new RegExp() 会直接报错或静默失效。
使用ydata-profiling(前身为pandas-profiling)生成全面的数据质量报告,包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
- 必须写成
"^/api"这样的字符串,开头的^表示匹配路径起始,/要加转义斜杠(即"^\/api")更稳妥 - 如果目标接口本身带前缀(比如后端是
http://xxx.com/v1/user),而你只想代理/v1下所有路径,就该写"^\/v1"并设"pathRewrite": { "^\/v1": "" } - 漏掉
pathRewrite或写错格式,会导致请求被转发成http://localhost:3000/api/user(多了一层/api),后端 404
changeOrigin 设为 true 才能解决 Host 头校验失败
很多后端服务(尤其是 Spring Boot、Nginx 反向代理)会校验 HTTP 请求头里的 Host 字段。代理转发时如果不改 Host,默认还是前端开发服务器的 localhost:8080,后端一看不是自己域名,直接拒绝。
-
"changeOrigin": true会让代理自动把Host改成target指定的地址(如localhost:3000) - 如果后端启用了 HTTPS,还要加
"secure": false,否则代理会因证书问题中断连接 - 某些老旧 Node 版本下,
changeOrigin在 Windows 环境可能触发 DNS 解析异常,可临时加"autoRewrite": true辅助
多个代理规则要共用同一 target 时,注意 pathRewrite 的覆盖顺序
一个项目常需代理多个前缀(如 /api、/upload、/ws),若它们指向同一个后端,别图省事全写成 "^/api" —— 否则 /upload/file.jpg 会被错误重写成 /file.jpg,丢失语义。
- 每个
pathRewrite键必须精确匹配其路径前缀,比如"/upload": { "target": "...", "pathRewrite": { "^\/upload": "" } } - 代理规则按对象属性顺序匹配,但实际执行以路径最长匹配为准;所以
"/api/users"会优先进入"/api/users"规则,而非"/api" - WebSocket 代理需要额外加
"ws": true,否则uni.connectSocket会连接失败
代理配置不是一次写完就一劳永逸的事。每次换后端地址、加新接口路径、或者升级 HBuilderX,都要重新核对 devServer 层级是否完整、pathRewrite 是否仍匹配真实请求路径——最常被忽略的,其实是保存文件后没重启开发服务器。

















