解决方案

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

作者:仙宝云 | 发布时间:2021-06-03 10:12:12 | 阅读:629

什么是跨域?

跨域是浏览器的专用概念,指js代码访问自己起源站点之外的站点比如A站点网页中的js代码,恳求了B站点的数据,就是跨域

A和B如果惦念被以为是同域,则必须有雷同的协议(比如http和https就不行)、雷同域名、和相同端口号(port)

如果你是做App、小程序等非H5平台,是不波及跨域题目的
稍微例外的是iOS的wkWebview,在5+App,或uni-app的web-view组件及renderjs中,由于WKWebview限制也见面发生跨域uni-app在App的普通js代码不运转在Webview下,不存在跨域题目

由于uni-app是规范的前后端分离模式,开发h5应用常常如果前端代码和后端接口没有安排在同域服务器,就会被浏览器回报跨域

安排经常的跨域解决方案

  • 方案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(https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
  • 跨源读取梗阻 详见:CORB(https://www.chromestatus.com/feature/5629709824032768)

由于文章不可插入外链,大家自行打开浏览器搜寻网址!

最常见的就是关于跨域资源共享的题目,也就是我们通常说的跨域当我们当地服务器预览页面,利用ajax访问长途服务器的内容经常就会恳求失败,比如:本地预览的地点是:http://localhost:8080/,访问的接口地点是http://dcloud.io/api

如果仅仅是为了本地预览,可以应用Chrome浏览器插件来帮忙调试

!!! 本插件只能解决简略恳求的跨域调试对于非简略请求的OPTION预检以及线上服务器也有跨域需求的用户,可以服务端配合解决。

智慧商业服务商仙宝云欢迎您!

请加微信: 18962171986 (宋经理)

在线咨询