uniapp开发h5跨域问题

最近用 uni-app 开发 h5(公众号) 发现一个问题, 如果用 uni-app 内置的浏览器访问项目的接口能正常访问, 但是当用到 Chrome 浏览器或 Firefox 浏览器就会出现大家非常常见的跨域问题
好了废话不多说, 来看看是怎么解决用 uni-app 解决 h5 中常见的跨域问题

先从根目录中的 manifest.json 点击进入

在找到源码视图进入找到 devServer 然后输入一下设置即可

"devServer" : {
"https" : true, // 是否启用 https 协议
"proxy" : {
"/api" : {
"target" : "https://xxxx.com", // 域名
"changeOrigin" : true,
"secure" : true,
"pathRewrite" : {
"^/api" : ""
}
}
}
}


最在自己的 uni.request()或者自己封装的请求接口下面加上一下代码即可

uni.request({
url: "/api" + "/xx/xx", // 前面加入在 devServer 中写的 /api 后面根据自己的文档写接口即可
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});


这样就解决了 h5(公众号) 的跨域问题啦