WEB端获取IP地址

Posted by Vison on October 10, 2017

最近项目中后端需要前端Web项目提供用户的IP地址,用作日志存储,虽然觉得后端也应该在请求头里面拿得到,但还是被逼着试了一波。 主要是因为后端获取的request里面只能拿得到公网地址,想看看前端能不能通过其他方式获取到内网IP地址。想要在所有浏览器及环境获取IP地址, 只有一种方法,就是通过接口查询。网上找了很多免费的接口,也全部做了验证,如下所示:

  • 腾讯的IP地址API接口地址:http://fw.qq.com/ipaddress 无法使用
  • 新浪的IP地址查询接口:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js 可以获取到国家、省份、城市
  • 新浪多地域测试方法:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=219.242.98.111 根据IP地址可以获取到国家、省份、城市
  • 搜狐IP地址查询接口(默认GBK):http://pv.sohu.com/cityjson 能获取到登陆城市、IP地址,返回js文件
  • 搜狐IP地址查询接口(可设置编码):http://pv.sohu.com/cityjson?ie=utf-8 能获取到登陆城市、IP地址,返回js文件
  • 搜狐另外的IP地址查询接口:http://txt.go.sohu.com/ip/soip 返回的是js文件
  • http://whois.pconline.com.cn 这个很强大 也比较详细,但是这个有问题 他JSON格式 属于回调

通过比较筛选,最后选择使用的接口:http://pv.sohu.com/cityjson,返回数据是document格式,也就是js文件,文件内容为

    var returnCitySN = {"cip": "222.92.80.50", "cid": "320500", "cname": "江苏省苏州市"};

起初想在登陆之前发起一个网络请求,请求该接口,但是不对劲啊,这肯定是存在跨域问题的啊,所以没办法只能使用script标签利用 src属性加载js文件来避免跨域问题

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

返回的变量直接在全局window中可以取到变量returnCitySN,使用方法如下:

import storage from '../utils/storage'

function getIp() {
  let ip = ''
  if (storage.get('ip')) {
    ip = storage.get('ip')
  } else if (window.returnCitySN['cip']) {
    storage.set('ip', window.returnCitySN['cip'])
    ip = window.returnCitySN['cip']
  }
  return ip
}

export default getIp