DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2018-11-20 18:29
  • 更新:2024-07-03 11:41
  • 阅读:384287

uni-app H5跨域问题解决方案(CORS、Cross-Origin)

分类:uni-app

什么是跨域

跨域是浏览器的专用概念,指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码,请求了B站点的数据,就是跨域。
A和B要想被认为是同域,则必须有相同的协议(比如http和https就不行)、相同域名、和相同端口号(port)。

如果你是做App、小程序等非H5平台,是不涉及跨域问题的。
稍微例外的是iOS的wkWebview,在5+App,或uni-app的web-view组件及renderjs中,由于WKWebview限制也会产生跨域,这方面另见专题文章:https://ask.dcloud.net.cn/article/36348。uni-app在App的普通js代码不运行在Webview下,不存在跨域问题。

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

如果前端要callfunction连接unicloud云函数

在h5页面里callfunction会跨域,此时需在unicloud的web控制台配置域名白名单,被加白的域名可以跨域callfunction。详见:https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=useinh5

另外运行期间在HBuilderX的内置浏览器里是不存在跨域的。

如果前端要连接传统后台服务器

分部署时的跨域方案和调试时的跨域方案,具体见下:

部署时的跨域解决方案

  • 方案1:最利索的,当然还是将前端代码和后端接口部署在同域的web服务器上
  • 方案2:由后台服务器配置策略,设为允许跨域访问。

例如:前端页面部署在uniCloud的前端页面托管里,但是需要访问自己服务器的接口,这时候需要在服务端允许前端页面托管的域名跨域访问。不同的服务端框架允许跨域的配置不一样,这里不再一一列举仅以eggjs为例。

(1)安装egg-cors包

npm i egg-cors --save

(2)在plugin.js中设置开启cors

exports.cors = {  
  enable: true,  
  package: 'egg-cors',  
};

(3)在config.default.js中配置

config.security = {  
  domainWhiteList: [ '前端网页托管的域名' ],  
};

调试时的跨域解决方案

前端工程师调试时,运行起来的前端代码在uni-app自带的web服务器中,而不是部署在后台业务服务器上,此时就会遇到跨域。
除了协调后端配置允许跨域,其实也可以自己解决跨域问题。共3种方案可选。

方案1 使用HBuilderX内置浏览器

这个内置浏览器经过官方处理,不存在跨域问题,简单易用,推荐使用。(需HBuilderX 2.6以上)
在打开页面后,点HBuilderX右上角的预览,即可打开内部浏览器。或者在运行菜单里选择运行到内置浏览器也可以。

方案2 配置webpack-dev-server代理

下面是一篇比uni官网文档更详细的配置指南,这里就直接贴地址了:https://juejin.im/post/5e43b2645188254902765766

方案3 给浏览器安装跨域插件,禁止浏览器报跨域

本插件并非万能,请仔细阅读与学习浏览器安全策略相关知识,不懂这些知识在评论里瞎喷的,官方不会回复。

当我们使用谷歌浏览器调试ajax请求的时候可能会遇到这两个问题:

  • 跨域资源共享 详见:CORS
  • 跨源读取阻塞 详见:CORB

最常见的就是关于跨域资源共享的问题,也就是我们通常说的跨域。当我们本地服务器预览页面,使用ajax访问远程服务器的内容时就会请求失败,比如:本地预览的地址是:http://localhost:8080/,访问的接口地址是http://dcloud.io/api。

如果仅仅是为了本地预览,可以使用Chrome浏览器插件来协助调试。
!!! 本插件只能解决简单请求的跨域调试(点击搜索什么是简单请求)。对于非简单请求的OPTION预检(点击搜索什么是预检请求)以及线上服务器也有跨域需求的用户,可以服务端配合解决

Chrome插件名称:Allow-Control-Allow-Origin: *

安装方式:

  1. 将下载的扩展插件拖入扩展管理页面

使用方式

  1. 打开待调试的页面
  2. 在扩展栏目找到安装的插件,点击打开插件配置
  3. 输入想要进行跨域调试的接口的地址,点击添加即可

注意事项

  • 此插件适合本地调试使用,线上部署如果和接口不同域还需要服务端配合。
  • 如果实际响应的内容与浏览器预期的内容有差异还可能被CORB策略所阻止。

firefox跨域插件

firefox跨域插件(注意firefox的css兼容问题)

其他历史问题

HBuilderX 2.3.0版在某些情况下会报跨域,请升级2.3.1+解决

36 关注 分享
Trust 没猫饼啊 7***@qq.com 2***@qq.com tu 呵呵打 丙申1987 5***@qq.com 恍若初见 不老刘 2***@qq.com 2***@qq.com 张拉荷 1***@qq.com 侠客请接刀s a***@qq.com z***@163.com aliang888 rysnone 慢慢来__ 2***@qq.com d***@163.com 1***@163.com 陈文权 六七四十二 v***@vip.qq.com 1***@qq.com 2***@qq.com 1***@qq.com dev_pz h***@163.com pure111 8***@qq.com 5***@qq.com 9***@qq.com xiaoxiaoka

要回复文章请先登录注册

n***@126.com

n***@126.com

把楼主提供的离线文件,安装到谷歌浏览器里面,把浏览器整个都关闭了,重新开启就好用了,但是正式环境还是需要配置跨域的,比如我用的nginx就需要配置一下跨域就OK了
2019-05-29 16:12
4***@qq.com

4***@qq.com

谢谢。。可以了。
2019-05-22 12:32
拓荒

拓荒

在开发过程中解决跨域,有个更简单的方法,在谷歌浏览器的快捷方式上邮件,在目标路径后面添加: --disable-web-security --user-data-dir=C:\Users\xxx\edgeData 注:C:\Users\xxx\edgeData是你随便创建的一个文件夹目录,保存后双击,然后打开开发环境的链接就可以了,但是由于设置了允许跨域所以此方式打开的浏览器不太安全,所以安全起见不要用这个快捷方式打开的浏览器去浏览敏感网站,要浏览其他网站还是用之前的快捷方式打开浏览器,或者换一个浏览器。
2019-05-15 15:29
拓荒

拓荒

回复 f***@126.com :
只能是打包完才能用吧,这样跟没法调试修改。
2019-05-15 11:12
拓荒

拓荒

没有任何效果
2019-05-15 11:11
f***@126.com

f***@126.com

回复 f***@126.com :
反代可以如下配置,其中8080是HBuilder X的服务端口,8088是后台服务端口
访问服务时使用80端口,http://xx.xx.xx.xx/pages/login/login
server {
listen 80;
server_name localhost;

location /pages/ {
proxy_pass http://127.0.0.1:8080;
}

location / {
proxy_pass http://127.0.0.1:8088;
}
}
2019-04-30 12:16
f***@126.com

f***@126.com

插件非万能,建议使用nginx做反向代理方式,相当于访问同一个ip,同一个端口,就不存在跨域问题了
2019-04-30 11:49
加班快乐

加班快乐

如何使用呢?我安装了,不管怎么设置,都不顶用
2019-04-18 16:18
6***@qq.com

6***@qq.com

Mac 可以用不?
2019-04-15 16:06
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 j***@126.com :
如果是H5端,不是因为更新了HBuilerX,是因为更新了浏览器,你可能需要搜索:CORB
2019-03-29 16:55