前言

之前在前端項(xiàng)目中獲取用戶ip的方式一直用的是搜狐的接口：http://pv.sohu.com/cityjson?ie=utf-8%22，同時(shí)這也是網(wǎng)上分享次數(shù)最多的接口，雖說提供的信息很少，但因?yàn)槭褂闷饋矸奖憧旖荩一緵]什么限制，所以還是挺不錯(cuò)的。但不知怎的，最新經(jīng)常在調(diào)用時(shí)出現(xiàn)403Forbidden，要么就是胡亂給ip和地區(qū)，總之就是沒法用。
沒辦法，是時(shí)候另尋他途了。在經(jīng)過一番挑選后，最終選擇了騰訊的位置信息服務(wù)。其它可選的還有百度、高德、天地圖等。

騰訊位置服務(wù)

官網(wǎng)：https://lbs.qq.com/

開發(fā)文檔：https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp

騰訊位置服務(wù)提供了非常多的地圖和位置相關(guān)的功能，而我只用了其中的IP定位，頗有點(diǎn)殺雞用牛刀的感覺。對(duì)于個(gè)人開發(fā)者，騰訊提供了10000次/天的調(diào)用量，并發(fā)上限為5次/秒，用于訪問量不大的個(gè)人網(wǎng)頁還是夠用的。但是擴(kuò)充配額只有成為企業(yè)開發(fā)者才能申請(qǐng)，所以對(duì)于訪問量較大的個(gè)人網(wǎng)址，只能選別的了。

使用方法

1.注冊賬號(hào)并登錄控制臺(tái)

2.創(chuàng)建應(yīng)用并添加key

在控制臺(tái)中點(diǎn)擊我的應(yīng)用，然后點(diǎn)擊創(chuàng)建應(yīng)用，信息可以隨意填。

創(chuàng)建好應(yīng)用后，點(diǎn)擊應(yīng)用內(nèi)的添加key：

在啟用產(chǎn)品中，按照自己的需求選擇類型，這里我根據(jù)需要選擇WebServiceAPI，并在白名單內(nèi)填入域名。

3.獲取調(diào)用URL

進(jìn)入WebServiceAPI的開發(fā)文檔，選擇IP定位，可以看到調(diào)用方式為URL+key。文檔下方有調(diào)用示例，ip為選填，可以不填，那么最終的調(diào)用API為：

https://apis.map.qq.com/ws/location/v1/ip?key=NHLBZ-LRM6U-ER2VE-4RJPZ-VUFVH-27BED

在瀏覽器的地址欄中輸入U(xiǎn)RL，可以看到返回了相關(guān)的信息：

4.在項(xiàng)目中調(diào)用API獲取IP和地區(qū)信息

以vue項(xiàng)目為例，由于調(diào)用的API屬于第三方地址，直接使用HTTP的get方式發(fā)送請(qǐng)求的話，會(huì)導(dǎo)致跨域，解決方式有多種，這里采用JSONP的方式進(jìn)行解決。

4.1在項(xiàng)目中安裝vue-jsonp

由于Axios并不支持jsonp的請(qǐng)求方式，所以需要安裝第三方插件vue-jsonp。

npm i vue-jsonp -S

4.2調(diào)用API

編寫一個(gè)方法用來調(diào)用獲得的api：

import { jsonp } from 'vue-jsonp'
import config from '../config/config.json'
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是異步調(diào)用，因此外套一層promise，并使用async...await的方式實(shí)現(xiàn)同步。

另外需要注意的是，在發(fā)送請(qǐng)求時(shí)，請(qǐng)求體里必須加上output: 'jsonp'，否則會(huì)出現(xiàn)跨域問題。

async getAddress() {
	let positionInfo = await this.getUserIpConfig()
	// ......
}

至此，使用騰訊位置服務(wù)獲取用戶ip的方式介紹完畢。

總結(jié)

到此這篇關(guān)于vue前端通過騰訊接口獲取用戶ip的文章就介紹到這了,更多相關(guān)vue前端獲取用戶ip內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論