前端获取用户ip地址，并放在请求头上（uniapp和H5）-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端获取用户ip地址，并放在请求头上（uniapp和H5）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今日需求：

获取用户ip地址，并在每一次请求的时候带上这个ip地址

1、如何获取用户IP地址：

获取用户ip地址的方式有很多，各大地图的开发者平台都能找到相关的API接口地址，都很牛掰，但是我看了一下，好像不太适合我（懒病犯了~~），所以我就用shohu的接口：

http://pv.sohu.com/cityjson?ie=utf-8

uni.request({
					url: '/sohu/cityjson',
					success: (res) => {
						const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
						let ip = reg.exec(res.data);
						// console.log(ip)
						// console.log(res.data)
						// console.log(ip[0]);
						uni.setStorage({
							key: 'ip',
							data: reg.exec(res.data),
							success: function() {
								// console.log('success');
							},
						});
					}
				});

当时想的思路很简单，直接用接口地址访问获取ip就可以了，因为我是APP和H5都需要开发。这样的话很显然，H5端必会出现跨域问题，所以我就使用了proxy解决了跨域问题。

2、跨域问题的解决

"devServer" : {
            "port" : 8000,
            "disableHostCheck" : true,
            "proxy" : {
                "/sohu" : {
                    "target" : "http://pv.sohu.com",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/sohu" : ""
                    }
                }
            }
        }

3、如何返回给后端

？？？很简单对吧！

拿到存储中保存的key就行了，直接放在接口请求头之中。但是，数据并没有传过去，APP端不适用这种方式。如果需要同时满足app和H5的话就需要用到条件编译

以下是完整的app和H5分别获取的ip地址的方式：

            //#ifdef H5    
                 //只执行h5
 				uni.request({
					url: '/sohu/cityjson',
					success: (res) => {
						const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
						let ip = reg.exec(res.data);
						console.log(ip)
						// console.log(res.data)
						// console.log(ip[0]);
						uni.setStorage({
							key: 'ip',
							data: reg.exec(res.data),
							success: function() {
								// console.log('success');
							},
						});
					}
				});
                  //只执行h5
				//  #endif 

				//  #ifdef APP-PLUS 
                   //只执行app
				uni.request({
					url: 'http://pv.sohu.com/cityjson?ie=utf-8',
					method: 'POST',
					success: (res) => {
						const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
						let ip = reg.exec(res.data);
						// console.log(ip[0]);
						uni.setStorage({
							key: 'ip',
							data: reg.exec(res.data),
							success: function() {
								// console.log('success');
							},
						});
					}
				}) 
                //只执行app
				//  #endif

完美解决~~

然后将保存的数据，在你的接口工具中拿到，放在请求头中就可以传给后端了！！！！

前端获取用户ip地址，并放在请求头上（uniapp和H5）