如何获取用户请求的真实ip,并返回访问者的ip地理位置？node,vue

大家好，欢迎来到IT知识分享网。

一、获取真实IP

方式1、前端调用免费公共接口获取

前端获取访问者的真实的外网ip,可以通过调用接口https://api.ipify.org/来获取。你也可以直接在网页上访问它来看自己的外网ip。

{ 
    "ip": "192.168.1.1" } 

方式2、服务端获取(在请求头中。。？)

router.get("/", async function (req, res, next) { 
    //在请求头中获取访问者的真是ip let ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress || req.socket.remoteAddress || req.connection.socket.remoteAddress || ''; console.log(ip,'<--ip'); // 判断访问的ip是不是ipv6,如果是则转换成ipv4,否则直接使用 // 通过正则判断是否是ipv6 var ipv6Reg = /:/g; let ipv4 = ip; if(ipv6Reg.test(ip)){ 
    ipv4 = ipv6ToV4(ip); } res.send(await getIpService(ipv4)) }); function ipv6ToV4(ip) { 
    //用来转换ipv6为ipv.... return ip } 

注意：如果是本地调试，（手机和电脑同一个wifi,手机访问电脑ip+服务），这样获取到的是你的局域网ip,你可以通过方式一调用免费公共接口获取外网请求的真实ip,或将应用部署到云服务进行调试。上面是当你项目上线后的后端获取ip的方式。

注：如果是前后端分离的项目，前端请求由nginx转发到后端服务，则需要在nginx代理中配置ip携带，nginx配置如下：

server { 
    listen 80; location / { 
    proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#指定后端服务器地址 proxy_pass http://backend_server; } } 

在这个配置中：

proxy_set_header Host $host;: 将原始请求的Host头信息转发到后端服务器。

proxy_set_header X-Real-IP $remote_addr;: 将客户端的IP地址放入X-Real-IP头信息中。

proxy_set_header X-Forwarded-For KaTeX parse error: Double subscript at position 12: proxy_add_x_̲forwarded_for;:…proxy_add_x_forwarded_for变量会检查现有的X-Forwarded-For头，如果存在，会将$remote_addr追加到列表后面。

proxy_pass http://backend_server;: 指定后端服务器地址。

后端服务器应用程序需要配置以读取这些头信息以获取原始客户端的IP地址。

二、获取地理位置信息