uni-app实现H5端跨域请求 uni-app配置文件代理解决跨域

大辰酱_7725

大辰酱_7725

2026-05-26

1133人浏览

原创

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

uni-app实现h5端跨域请求 uni-app配置文件代理解决跨域

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() 会直接报错或静默失效。

Pandas 配置文件报告生成器
Pandas 配置文件报告生成器

使用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 是否仍匹配真实请求路径——最常被忽略的,其实是保存文件后没重启开发服务器。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app 配置文件

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2883

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

6283

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

7190

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

7018

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

1003

5

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.09

3923

4

http请求415错误怎么解决
http请求415错误怎么解决

解决方法:1、检查请求头中的Content-Type;2、检查请求体中的数据格式;3、使用适当的编码格式;4、使用适当的请求方法;5、检查服务器端的支持情况。更多http请求415错误怎么解决的相关内容,可以阅读下面的文章。

2023.11.14

974

3

HTTP 503错误解决方法
HTTP 503错误解决方法

HTTP 503错误表示服务器暂时无法处理请求。想了解更多http错误代码的相关内容,可以阅读本专题下面的文章。

2024.03.12

6786

8

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.08.16

5530

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习