uniapp跨域的问题

本文详细介绍了uniapp中解决跨域问题的步骤,包括在manifest.json中配置代理,确保每次修改IP后重启HBuilderX,以及在代码中正确调用接口的方法。通过设置proxy代理,实现了对http://192.168.1.100:8888/api接口的访问,并在uni.request中使用'/api/demo/get'进行数据请求。
摘要由CSDN通过智能技术生成

跨域问题网上有很多很多,我也看了很多很多,有些是对的,但是你按照他的方法做了后,就是不正确。其中一点就是,你启动HBuilder X后,设置ip,然后再修改ip,要关闭HBuilder X,再重启,为保险起见,每次修改ip后,都关闭HBuilder X,然后重启就行了,重启,重启,这是重中之重。下面说一下流程。这是血泪和时间的结晶。

1.首先我们看接口是不是可以访问。接口问题不再详述。我这里接口返回

Hello World!

2.打开manifest.json的源码视图

3.增加H5,这里的ip是http://192.168.1.100:8888/api/demo/get,所以你在写target的时候,只写到api哪个地方就行了。

	"h5" : {
		"router" : {
			"mode" : "hash" // 路由模式
		},
		"devServer" : {
			"https" : false, // 是否启用 https 协议,默认false
			//"port": 8080, // 本地端口号
			"disableHostCheck": true, // 禁用 Host 检查,默认false
			"proxy": { // 代理配置
				"/api": { 
					"target": "http://192.168.1.100:8888/api",   // 目标接口域名
					"changeOrigin": true, // 是否跨域
					"secure": true, // 是否支持https协议的代理
					"pathRewrite":{"^/api":"/"} // 这个一定要加,意思就是把你项目中一dev开头的接口自动替换为 target + pathRewrite第二个参数来进行数据的请求(pathRewrite没有第二个参数的话直接为target)
				}
			}
		}
	}

 4.界面调用,这里的url,只写api后面的地址就行了。原理就是:遇到api替换了前面的target内容,然后加上现在的/demo/get

	uni.request({
					//请求头
					header: {
						 "Content-Type":"application/x-www-from-urlencoded"
					},
					timeout:3000,
					//api地址
					url: '/api/demo/get',
					data: {},
					//请求类型
					method: 'GET',
					
					success: (res) => {
						console.log("123");
						console.log(res.data);
						//this.books = res.data;
						this.D = res.data;
					}
				});

5.界面效果,界面取值的是接口返回的第一个数值,所以是H,后面加了数字5

 

来源:uniapp跨域的问题_uniapp跨域问题_故里2130的博客-CSDN博客

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

故里2130

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值