vue中使用接口(搜狐接口)获取访客IP地址
花了1天时间踩坑，终于探索出来了最方便的解决方式。。网上大部分大厂的获取ip的方式都已不可用，只有搜狐接口还有一些小网站搞出来的接口能用。这里我使用的是搜狐获取IP的。
花了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'))
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献13条内容
所有评论(0)