*uni-app之H5端跨域问题解决方案

最新推荐文章于 2025-04-15 15:53:17 发布

pepsihhh

最新推荐文章于 2025-04-15 15:53:17 发布

阅读量7.5k

点赞数

文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/weixin_43251902/article/details/115085509

版权

本文详细解析了浏览器中的跨域概念及其产生的原因，指出uni-app在H5环境中因同源策略遭遇跨域限制，而在App和小程序中则不受此限。针对开发阶段的跨域调试，提供了使用HBuilderX内置浏览器、配置webpack-dev-server代理和安装Chrome跨域插件三种解决方案。同时，讨论了部署时的跨域策略，包括同域部署和服务器配置Access-Control-Allow-Origin。最后，介绍了Access-Control-Allow-Origin头信息在解决跨域问题中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：跨域问题只存在于浏览器端，App和小程序不存在跨域问题。

产生原因：由于uni-app是标准的前后端分离模式
开发h5应用时如果前端代码和后端接口没有部署在同域服务器，就会被浏览器报跨域。

前后端分离的开发模式越来越流行,目前绝大多数的公司与项目都采取这种方式来开发,它的好处是：
前端可以只专注于页面实现,而后端则主要负责接口开发,前后端分工明确,彼此职责分离,不再高度耦合。
但是由于这种开发模式将前后端项目分开来独立部署,所以将必不可免的会碰到跨域问题.

解决方案：uni-app官方推荐使用HBuilderX中内置的浏览器去预览，在内置的浏览器中不会存在跨域问题；
但是要是在Chrome 浏览器中预览的话就会出现这个跨域问题！官方推荐使用安装Allow-Control-Allow-Origin: * 插件的方式去解决。参考：uni-app H5跨域问题解决方案（CORS、Cross-Origin）。
拓展：在App、小程序等非H5平台，是不涉及跨域问题的。稍微例外的是iOS的wkWebview，在5+App，或uni-app的web-view组件及renderjs中，由于WKWebview限制也会产生跨域，这方面另见Appstore审核反馈废弃UIWebview APIs问题的说明。uni-app在App的普通js代码不运行在Webview下，不存在跨域问题。

那什么是跨域呢我们来了解下！