花了1天时间踩坑，终于探索出来了最方便的解决方式。。
网上大部分大厂的获取ip的方式都已不可用，只有搜狐接口还有一些小网站搞出来的接口能用。这里我使用的是搜狐获取IP的接口。
搜狐接口返回的是一个js变量，类似下面格式：

var returnCitySN = {"cip": "XXX.XXX.XXX.XXX", "cid": "100000", "cname": "北京市"};

html文件访问

直接引用js文件就行

<html>
<body><div class="center" id="ip"></div><script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript"><!-- document.write(returnCitySN["cip"]+','+returnCitySN["cname"]) -->var words = returnCitySN["cname"]+': '+returnCitySN["cip"];document.getElementById('ip').innerHTML = words;</script>
</body>
</html>

错误使用方式

1、在后端直接获取接口数据

最开始我就是用的这种方式，获取接口数据后再将处理后的数据返回给前端。直到我把项目放到云服务器后，才发现后端获取的接口数据其实是服务端的ip，并不是客户端的ip。

2、在vue项目中引用js文件

像我上面写的html使用方法一样，使用两个script标签，导入js文件。
毫无疑问报错了。
报错原因：vue是单页面应用，不能使用两个script标签

3、前端使用axios访问接口，将数据传到后端处理

使用axios访问接口,具体方法这里不再赘述。结果就是和第1条的结果一样，接口返回的数据是服务端的ip，并不是客户端的ip。

正确使用姿势

在项目中的index.html文件导入js文件

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript">var Ip=returnCitySN['cip']var cityname=returnCitySN['cname']localStorage.setItem('Ip', Ip)</script>

其中最重要的是localStorage.setItem(‘key’,A)函数,关于这个函数，百科是这样说的：

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

setItem可以将变量A存储到key字段，这样我们就可以在index.html文件导入后，在全局使用这个变量：

let strIp:string=String(localStorage.getItem('Ip'))

vue中使用接口(搜狐接口)获取访客IP地址相关推荐

Java获取访客IP地址
原文地址:https://dsx2016.com/?p=226 ➢ 获取IP地址在开发工作中,我们常常需要获取客户端的IP ➢ nginx配置为了拿到真实的IP地址,避免代理等错误源,需要在ngi ...
php如何获取访问者地理位置,PHP获取访客IP和地理位置等信息的类
这是一个能够获取到用户访问信息的PHP类,包括:ip地址.地理信息.操作系统.语言.浏览器和isp等等.获取地理位置和ISP信息是请求的Baidu隐藏接口. 代码如下: 1.[代码][PHP]代码 / ...
php获取访客精确ip,PHP获取访客IP、地区位置等技巧分享
本文主要和大家介绍了利用PHP获取访客IP.地区位置.浏览器及来源页面等信息的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧. 示例代码& ...
PHP获取访客ip、系统、浏览器等信息[转]
1.获取访客操作系统信息 <?php function GetOs() { if (!empty($_SERVER['HTTP_USER_AGENT'])) { $OS = $_SERVER[' ...
html获取访客ip,jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
本文实例讲述了jQuery获取访问者IP地址的方法.分享给大家供大家参考,具体如下: $(document).ready(function(){ //通过调用新浪IP地址库接口查询用户当前所在国家.省 ...
django+vue+nginx+frp搭建漫画网站之获取访客真实ip（二）
地址:http://www.iewoai.com/ 1.背景最近听室友说,他网站有监控访客的ip,并通过钉钉通知的服务.于是我在想,我为什么不给漫画网站加这个服务呢,说整就整,首先得获取到真实ip. ...
html页面跳转IP,JS获取访客IP进行自动跳转
因业务需要进行地区判断跳转指定站点,下面是我个人实现的办法,分享给大家,仅供参考,切勿做非法用途第一步,获取IP并判断归属地直接使用搜狐的IP库查询接口返回的地址是: var returnCit ...
纯真ip php,PHP利用纯真数据库获取访客IP物理地址
//=================================== // // 功能:IP地址获取真实地址函数 // 参数:$ip - IP地址 // //================== ...
php REMOTEADDR之获取访客IP的代码
$_SERVER 是一个包含了诸如头信息(header).路径(path).以及脚本位置(script locations)等等信息的数组.这个数组中的项目由 Web 服务器创建.不能保证每个服务器都 ...

vue中使用接口(搜狐接口)获取访客IP地址