h5微信本地调试 vue_UniApp本地调试H5(谷歌chrome浏览器)跨域问题的解决方法,亲测可用...

本文介绍了在Chrome浏览器中解决Vue和UniApp H5本地调试时遇到的跨域问题,通过在manifest.json中添加代理配置实现。详细步骤包括在manifest.json中设置devServer,以及在vue请求页面如何使用uni.request。通过这种方法,实际请求被代理到目标API地址,从而绕过跨域限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

UniApp本地调试H5跨域(谷歌chrome浏览器,UniApp内置浏览器不存在此问题)的推荐方案:欺骗浏览器,让浏览器觉得你没有跨域(其实还是跨域了,用的是代理)

客户器端解决方案(亲测可用):

1、在manifest.json里添加如下跨域代码:"h5" : {

"devServer" : {

"port" : 2001,//你H5网址的端口,如:http://localhost:2001/#/pages/index/index

"disableHostCheck" : true,

"proxy" : {

"/api" : {

"target" : "http://localhost:2000",//你api接口的请求地址,可以是域名,也可以是本地api地址,也可以是ip地址

"changeOrigin" : true,

"secure" : false

}

},

"https" : false

}

}

2、在你的vue请求页面,如index.vue的代码如下:uni.request({

url: '/api/index/index',

method: 'GET',

success: (res) => {

console.log(res);

}

});

下面这些解释可以不看,照抄上面代码即可

参数说明

"proxy"里的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值