js获取ip地址|极客笔记

js获取ip地址

在前端开发中，有时候我们需要获取用户的IP地址来进行一些相关操作。这篇文章将详细介绍如何在JavaScript中获取用户的IP地址。

为什么需要获取IP地址

获取用户的IP地址在很多场景下都是非常有用的。比如在网站统计分析中，我们可以通过IP地址来统计用户的地理位置信息，从而进行精准的定位；在一些安全验证中，我们也可以通过IP地址来识别用户身份，进行登录限制等操作。

获取IP地址的方法

在JavaScript中获取用户的IP地址有多种方法，下面我们逐一介绍。

通过第三方API获取

第一种方法是通过调用第三方API来获取用户的IP地址。这种方法非常简单，只需要调用对应的API接口即可。

fetch('https://api.ipify.org?format=json')
  .then(response => response.json())
  .then(data => console.log(data.ip))
  .catch(error => console.error(error));

上面的代码通过使用ipify提供的API接口来获取用户的IP地址。

使用WebRTC获取

另一种方法是通过使用WebRTC来获取用户的IP地址。这种方法比较麻烦一点，需要进行一些额外的操作。

const getIP = () => new Promise((resolve, reject) => {
  const peerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
  const pc = new peerConnection({iceServers: []});
  const noop = () => {};
  pc.createDataChannel('');
  pc.createOffer(pc.setLocalDescription.bind(pc), noop);

  pc.onicecandidate = ice => {
    if (!ice || !ice.candidate || !ice.candidate.candidate) return;
    resolve(ice.candidate.candidate.split(' ')[4]);
    pc.onicecandidate = noop;
  };
});

getIP().then(ip => console.log(ip)).catch(error => console.error(error));

上面的代码通过创建一个RTCPeerConnection来获取用户的IP地址。

使用服务端获取

最后一种方法是通过服务端来获取用户的IP地址。我们可以通过在前端发送请求，然后在服务端获取IP地址。

// 前端代码
fetch('/getIP')
  .then(response => response.json())
  .then(data => console.log(data.ip))
  .catch(error => console.error(error));

// 服务端代码（Node.js示例）
const express = require('express');
const app = express();

app.get('/getIP', (req, res) => {
  const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
  res.json({ip: ip});
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

上面的代码中，前端发送一个请求到服务端，服务端通过req.headers获取到用户的IP地址，然后返回给前端。