全网都在搞的评论区、主页等显示IP地址功能

背景

近大半年发现很多的应用, 不限于(微博，抖音，知乎、yuque、字节、微信等）都开放了显示 IP 属地的显示，这个功能挺有趣，同时我也思考了一下，想在自己的项目中使用，现在就写下这篇文章谈谈让我做的实现思路和想法；

话说掘金什么时候出这个功能？

作为前端仔，先给掘金设计一波😀.

实现

就两个问题, 获取ip, 再拿ip地址换地理位置信息(省市区)

下面我们以Node.js为例子

获取IP地址

从Http header中可以获取到客户端在请求头中携带的IP地址

头部名词的解释

X-Forwarded-For：Web 服务器获取访问用户的真实 IP 地址，若存在代理，最左边是最原始客户端的 IP 地址；

在node.js中

koa为例子

在中间件函数中, 获取header里的x-forwarded-for子段

export default (ctx, next) => {
  const {
    method, body, query, header: { 'x-forwarded-for': ip },
  } = ctx.request;
  console.log(ip, 'ip地址’)
}

nginx的配置

如果你使用的nginx代理你的服务, 其实上面node里获取的真实ip那个子段, 依赖于nginx的转发。就是这行。 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

子段释义

$proxy_add_x_forwarded_for 记录真实的客户端IP地址，但是服务器中的日志需要有这个变量。

参考链接 nginx官方文档 (https://nginx.org/en/docs/http/ngx_http_proxy_module.html#var_proxy_add_x_forwarded_for)

nginx配置转发伪代码

server {
      listen 80;
           ...
              location  /api/ { 
              ...
              // 代理真实IP
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              ...
              proxy_set_header Connection "upgrade";
              proxy_pass http://127.0.0.1:8001/;
              proxy_redirect off;
        }
}

ip地址换地理位置

注册高德地图开放平台, 进入控制台(https://lbs.amap.com/)

创建一个应用

在应用创建一个apikey

apikey创建好了

使用IP定位API

文档链接(https://lbs.amap.com/api/webservice/guide/api/ipconfig)

如下, 传你的apiKey和ip地址即可换取省市区及经纬度

https://restapi.amap.com/v3/ip?key=XXX&ip=你的ip地址

返回示例

{
    "status": "1", // 1为成功
    "info": "OK",
    "infocode": "10000",
    "province": "浙江省",
    "city": "杭州市",
    "adcode": "330100",
    "rectangle": "119.8824799,29.95931271;120.5552208,30.52048536"
}

node中使用

koa中间件中使用

const fetch = require('node-fetch');
export default async(ctx, next) => {
  const {
    method, body, query, header: { 'x-forwarded-for': ip },
  } = ctx.request;
  const info = await getLocation(ip);
  // console.log(info, '省市信息’)
    // {
    //   "status": "1",
    //     "info": "OK",
    //     "infocode": "10000",
    //     "province": "浙江省",
    //     "city": "杭州市",
    //     "adcode": "330100",
    //     "rectangle": "119.8824799,29.95931271;120.5552208,30.52048536"
    // }
  await next()
}
  
/*
 * ip获取省市信息
 * @param {} $ip
 * @returns 省市信息
 */
async function getLocation($ip) {
  // 处理一下ip
  const ip = $ip.replace(/::ffff:/g, '').split(',')[0];
  // 调用高德地图的
  const ipResult = await fetch(`https://restapi.amap.com/v3/ip?key=310d88b1f76599ee6a4b0bd50ba6bbd8&ip=${ip}`).then((res) => res.json()).catch(() => { });
  if (data && data.status === '1') {
      return ipResult;
  }
  return null;
}