当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中运行,也变得正常了。

本文系作者 @ 原创发布在 。未经许可,禁止转载。

Like()
feacx
站长
28 Posts
0 Comments
13 Likes
Top