前言

之前在前端項(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ù)。其它可選的還有百度、高德、天地圖等。

目前創(chuàng)新互聯(lián)公司已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、來賓網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。騰訊位置服務(wù)

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

使用方法 1.注冊賬號并登錄控制臺 2.創(chuàng)建應(yīng)用并添加key

在控制臺中點(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)用方式為：

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ā)送請求的話，會導(dǎo)致跨域，解決方式有多種，這里采用JSONP的方式進(jìn)行解決。

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

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

npm i vue-jsonp -S

4.2調(diào)用API

編寫一個(gè)方法用來調(diào)用獲得的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是異步調(diào)用，因此外套一層promise，并使用async...awat的方式實(shí)現(xiàn)同步。

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

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

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

網(wǎng)頁題目：【vue】前端獲取用戶ip的方式-創(chuàng)新互聯(lián)
文章地址：http://weahome.cn/article/cssscd.html