由于端口設(shè)置與查詢服務(wù)器不一致，所以不能直接從ip138網(wǎng)上抓取，只能跨域查詢。實(shí)現(xiàn)跨域查詢，簡單的方法是使用jsonp方式，只支持get請求，同時(shí)也需要查詢的服務(wù)器支持jsonp。這時(shí)找到了騰訊位置服務(wù)。參考文章，代碼有一些需要注意，看下文。

1.注冊賬號

首先在https://lbs.qq.com/console/setting.html這個網(wǎng)頁中 ， 申請你自己key，也就是密鑰，有了這個密鑰，你才有資格使用位置服務(wù)api；

2.添加key

申請后，然后在官網(wǎng)上設(shè)置你的key，找到　　key管理–》啟用產(chǎn)品–》WebServiceAPI 選擇授權(quán)IP 內(nèi)容輸入0.0.0.0-255.255.255.255
key名稱隨意，因?yàn)楹竺姘l(fā)起jsonp時(shí)參數(shù)名必須為key

3、給ip定位接口添加配額

個人開發(fā)者可設(shè)置調(diào)用量最高10000，每天自動清零。

4、安裝vue-jsonp

工程目錄下運(yùn)行cmd：

npm i vue-jsonp -S

在main.js中導(dǎo)入vue-jsonp

import {VueJsonp} from 'vue-jsonp';   //注意：這里要加花括號
Vue.use(VueJsonp);

調(diào)用jsonp方法，獲取數(shù)據(jù)

	  //使用騰訊服務(wù)獲取ip和歸屬地getIpAddress(){this.$jsonp('https://apis.map.qq.com/ws/location/v1/ip', {key:xxxxxx,//注意：這里使用key為鍵名output:'jsonp',}).then(response => {console.log(response);console.log(response.result.ip);console.log(response.result.ad_info.nation);console.log(response.result.ad_info.province);console.log(response.result.ad_info.city);}).catch(error => {console.error(error);});},