讲师中心 微信公众号
AI工具推荐 视频效率加速

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

大辰酱_7725

大辰酱_7725

发布时间:2026-05-26 06:58:36

|

1133人浏览过

|

来源于php中文网

原创

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

热门AI工具

更多
UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

相关专题

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

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

2883

2023.08.11

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

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

6283

2023.10.09

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

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

7190

2024.03.19

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

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

7018

2024.03.22

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

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

1003

2024.05.22

http500解决方法
http500解决方法

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

3923

2023.11.09

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

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

974

2023.11.14

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

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

6786

2024.03.12

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

0

2026.11.06

热门下载

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

精品课程

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

共0课时 | 0人学习

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

共0课时 | 0人学习

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

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn