【vue】前端获取用户ip的方式-创新互联
之前在前端项目中获取用户ip的方式一直用的是搜狐的接口:http://pv.sohu.com/cityjson?ie=utf-8%22,同时这也是网上分享次数最多的接口,虽说提供的信息很少,但因为使用起来方便快捷,且基本没什么限制,所以还是挺不错的。但不知怎的,最新经常在调用时出现403Forbidden,要么就是胡乱给ip和地区,总之就是没法用。
没办法,是时候另寻他途了。在经过一番挑选后,最终选择了腾讯的位置信息服务。其它可选的还有百度、高德、天地图等。
官网:https://lbs.qq.com/
开发文档:https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp
腾讯位置服务提供了非常多的地图和位置相关的功能,而我只用了其中的IP定位,颇有点杀鸡用牛刀的感觉。对于个人开发者,腾讯提供了10000次/天的调用量,并发上限为5次/秒,用于访问量不大的个人网页还是够用的。但是扩充配额只有成为企业开发者才能申请,所以对于访问量较大的个人网址,只能选别的了。
在控制台中点击我的应用,然后点击创建应用,信息可以随意填。
创建好应用后,点击应用内的添加key:
在启用产品中,按照自己的需求选择类型,这里我根据需要选择WebServiceAPI
,并在白名单内填入域名。
进入WebServiceAPI
的开发文档,选择IP定位,可以看到调用方式为URL+key。文档下方有调用示例,ip为选填,可以不填,那么最终的调用方式为:
https://apis.map.qq.com/ws/location/v1/ip?key=NHLBZ-LRM6U-ER2VE-4RJPZ-VUFVH-27BED
在浏览器的地址栏中输入URL,可以看到返回了相关的信息:
以vue项目为例,由于调用的API属于第三方地址,直接使用HTTP的get方式发送请求的话,会导致跨域,解决方式有多种,这里采用JSONP
的方式进行解决。
由于Axios并不支持jsonp的请求方式,所以需要安装第三方插件vue-jsonp。
npm i vue-jsonp -S
4.2调用API编写一个方法用来调用获得的api:
getUserIpConfig() {return new Promise((resolve, reject) =>{jsonp(`https://apis.map.qq.com/ws/location/v1/ip?key=${config.MapKey}`, { output: 'jsonp'
}).then(resp =>{ resolve(resp)
}).catch(err =>{ console.log(err);
})
})
}
由于jsonp是异步调用,因此外套一层promise,并使用async...awat
的方式实现同步。
async getAddress() {let positionInfo = await this.getUserIpConfig()
// ......
}
至此,使用腾讯位置服务获取用户ip的方式介绍完毕。
你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧
文章名称:【vue】前端获取用户ip的方式-创新互联
网页URL:http://scyanting.com/article/cssscd.html