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