前端获取用户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地址了！