vue中使用接口(搜狐接口)获取访客IP地址_vue 调用 sohu开放接口获取ip基本信息-CSDN博客

本文链接：https://blog.csdn.net/corruptwww/article/details/126155951

花了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'))