当Uni-app编译H5遇到跨域请求时坑总结
一、H5模式域名遇到跨域及设置方法
h5模式下,只要发请求基本都会遇到跨域,跨域设置方法如下:
进入项目根目录 src
目录,打开 manifest.json
文件,拖拽到底部,可以看到上面已经配置了 mp-qq、mp-toutiao 等模式,你只需要在此处同级添加下方h5模式即可解决跨域问题。
"h5": { "devServer": { "port": 8088, //端口号 "disableHostCheck": true, "proxy": { "/api": { "target": "http://api.xxx.cn/", //目标接口域名 "changeOrigin": true, //是否跨域 "secure": false // 设置支持https协议的代理 } } } }
二、设置跨域后的使用
跨域设置完毕后,在http请求中访问api接口的规则如(以上方设置为例):
原网址:http://www.xxx.cn/api/getuser
请求网址:uni.request('/api/getuser')
// 当遇到 /api
程序会自动为你代理上一步配置的网址。
三、使用时遇到的诡异问题
配置完成后,发送请求时,通过F12查看调试工具中的network面板,发现请求结果中一直提示304或者200或者404,而且201时还会出现提示 Please enable JavaScript to continue.
我因为这个问题琢磨了一小时方才解决,而且网上也找到很多人说这个情况,根据尝试均无解,最终自己研究出一个奇怪的解决方法。
我用的是VSCode,但你此时需要一个HBuilder,毕竟uni-app是他们开发的,对自己的编辑器宠爱之至。通过Hbuilder导入你的项目,左侧tab栏选中该项目,点击菜单栏的 运行
,并选择运行至Chrome,此时神奇的事情发生了,代码没改,但是可以正常获取数据了,更神奇的是,现在你把HBuilder关掉,在VSC中运行,也变得正常了。
本文系作者 @feacx 原创发布在 徐小鹏的个人分享。未经许可,禁止转载。