5***@qq.com
5***@qq.com
  • 发布:2020-03-31 18:35
  • 更新:2021-05-03 03:45
  • 阅读:7334

优雅解决H5前端跨域请求

分类:uni-app

最近在做UNI项目,编译为H5,部署到自己的服务器时,出现了一个很蛋疼的问题:

**has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource**

这不就是万恶的跨域么?但奇葩的是,在前端代码所在服务器上curl接口地址,是可以ping通的哦。
第一想法,上UNI官网看看,毕竟官网的意见还是相对权威的,总结官网的观点就是2句话:

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

第1种方案不可行,接口服务器是客户的,不为我们所用。
第2种方案,后台服务器已经开放了跨域限制了,可H5页面还是请求不到。。。

官方不行,那就百度、谷歌走一通,大部分的回答都是配置devServer,范例如下:
"h5": {
"devServer": {
"port": 8000,
"disableHostCheck": true,
"proxy": {
"/dpc": {
"target": "http://dpc.dapeis.net",
"changeOrigin": true,
"secure": false
}
}
}
}
我欣喜若狂地尝试了一通,结果TMM,还是不行。。。说实在的 我实在想不通这样配置,是怎么实现了代理的。。。(麻烦有识之士留言)
如是乎,我去吃个饭,洗个澡,冷静了一下,,,出来后脑子灵光一闪,我把接口地址指向前端代码所在服务器A,再由A通过nginx转向到正式的接口服务器,不就好了。。。
激动时刻来了,还真的可以访问了。。。特此留言,兴许能帮到后期遇到同样问题的同行。。。

PS:诚接各类软件定制开发

1 关注 分享
2***@qq.com

要回复文章请先登录注册

yinghuoc

yinghuoc

楼主这种方式也叫优雅解决?你知道A通过nginx代理转发以后,会多一层网络访问吗?假如你的用户有10万人,他们都需要先访问A,然后A服务器去访问B,B返回给A,A返回给用户。就这样多一层流程,你觉得你的用户体验会好得起来?从细节做起,老弟。
2021-05-03 03:45
1***@163.com

1***@163.com

回复 2***@qq.com :
我这边还是不行,代理就没生效
2021-05-01 22:50
[已删除]

[已删除]

承接H5、小程序、APP等外包:
1. 经验丰富,做过多种类型项目,有案例可看;
2. 整个项目外包可以找我(小团队接单,面向客户、产品);
3. 只需要前端部分也可以找我(个人接单,面向服务端合作伙伴);
4. wechat(13070273424);
2021-01-10 13:33
l***@orcacn.com

l***@orcacn.com

具体怎么整的有示例吗?
2021-01-09 16:33
f***@west.cn

f***@west.cn

还是没有搞懂,前端能怎么整。

我感觉这个应该是服务器或者hbuilder内置的devServer哪里做了啥限制,导致不通过的。

都配置了跨域中转了,理论上服务器不需要做任何跨域兼容处理的,
因为devServer本来相当于提供了一个允许跨域请求的服务器,由该服务器根据中转规则帮你直接发http请求,然后再把结果返给你。
2020-11-05 11:25
s***@foxmail.com

s***@foxmail.com

回复 1***@qq.com :
devServer 在正式发布环境也起作用??
2020-09-27 07:36
9***@qq.com

9***@qq.com

大佬,能不能把代码粘贴出来?
2020-06-05 10:32
1***@qq.com

1***@qq.com

在manifest.json中配置代理,如"devServer": {
"disableHostCheck": true,
"proxy": {
"/api": {
"target": "http://edu.yunlimall.cn",
"changeOrigin": true,
"secure": false
}
}
},
请求的时候代理的是/api部分,url = "/api/getUser"
2020-03-31 19:00
2***@qq.com

2***@qq.com

拜谢,这个问题之前纠结了我好几天,今天随手一翻就翻到这个问题,马上试了试,完美解决
2020-03-31 18:50