Js怎么取访问者的ip

通过JavaScript获取访问者的IP地址

JavaScript本身无法直接获取访问者的IP地址、需要借助第三方API、通过服务器端代码实现获取IP地址。JavaScript本身没有内置的功能来直接获取访问者的IP地址，这是因为IP地址信息通常在服务器端，而不是客户端。然而，通过结合第三方API或服务器端代码，可以实现这个功能。下面将详细介绍如何通过这两种方法来获取访问者的IP地址。

一、使用第三方API

利用第三方API是获取访问者IP地址的最简单方法。许多服务提供免费的IP地址API，可以通过JavaScript调用这些API来获取访问者的IP地址。

1.1 使用 ipify API

ipify 是一个简单而强大的API，可以返回请求者的公共IP地址。以下是使用ipify API的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get IP Address</title>
</head>
<body>
<h1>Your IP Address</h1>
<p id="ip"></p>
<script>
    async function getIP() {
        const response = await fetch('https://api.ipify.org?format=json');
        const data = await response.json();
        document.getElementById('ip').textContent = data.ip;
    }
    getIP();
</script>
</body>
</html>

在这个示例中，JavaScript使用 fetch 方法调用 ipify API，并将返回的IP地址显示在网页上。

1.2 使用 ipinfo API

ipinfo 是另一个受欢迎的IP地址API，不仅可以返回IP地址，还可以提供有关位置、ISP等更多信息。以下是使用ipinfo API的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get IP Address</title>
</head>
<body>
<h1>Your IP Address and More</h1>
<p id="details"></p>
<script>
    async function getIPInfo() {
        const response = await fetch('https://ipinfo.io/json?token=YOUR_TOKEN_HERE');
        const data = await response.json();
        document.getElementById('details').textContent = `IP: ${data.ip}, City: ${data.city}, Region: ${data.region}, Country: ${data.country}`;
    }
    getIPInfo();
</script>
</body>
</html>

注意，您需要在ipinfo网站上注册并获取一个API令牌（YOUR_TOKEN_HERE）。

二、通过服务器端代码获取IP地址

在某些情况下，使用服务器端代码获取访问者的IP地址可能更适合。服务器端代码可以通过请求头信息获取IP地址，并将其传递给客户端。

2.1 使用Node.js和Express

以下是使用Node.js和Express框架获取IP地址并传递给客户端的示例代码：

首先，安装Express：

npm install express

然后，创建一个简单的服务器：

const express = require('express');
const app = express();
const port = 3000;
app.get('/get-ip', (req, res) => {
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
    res.json({ ip: ip });
});
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

在客户端，您可以通过以下代码获取IP地址：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get IP Address</title>
</head>
<body>
<h1>Your IP Address</h1>
<p id="ip"></p>
<script>
    async function getIP() {
        const response = await fetch('/get-ip');
        const data = await response.json();
        document.getElementById('ip').textContent = data.ip;
    }
    getIP();
</script>
</body>
</html>

在这个示例中，服务器端代码通过请求头获取访问者的IP地址，并将其作为JSON响应返回给客户端。

三、通过WebRTC获取本地IP地址

WebRTC（Web Real-Time Communication）是一个支持浏览器进行音视频通话的协议，也可以用于获取本地IP地址。以下是使用WebRTC获取本地IP地址的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Local IP Address</title>
</head>
<body>
<h1>Your Local IP Address</h1>
<p id="local-ip"></p>
<script>
    function getLocalIP() {
        return new Promise((resolve, reject) => {
            const RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
            const pc = new RTCPeerConnection({ iceServers: [] });
            const noop = () => {};
            const localIPs = {};
            const ipRegex = /([0-9]{1,3}(.[0-9]{1,3}){3})/g;
            const key = 'candidate';
            function iterateIP(ip) {
                if (!localIPs[ip]) resolve(ip);
                localIPs[ip] = true;
            }
            pc.createDataChannel('');
            pc.createOffer().then(sdp => {
                sdp.sdp.split('n').forEach(line => {
                    if (line.indexOf(key) < 0) return;
                    line.match(ipRegex).forEach(iterateIP);
                });
                pc.setLocalDescription(sdp, noop, noop);
            }).catch(reject);
            pc.onicecandidate = ice => {
                if (!ice || !ice.candidate || !ice.candidate.candidate) return;
                ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
            };
        });
    }
    getLocalIP().then(ip => {
        document.getElementById('local-ip').textContent = ip;
    }).catch(console.error);
</script>
</body>
</html>

请注意，WebRTC技术可以暴露本地IP地址，但由于安全和隐私问题，某些浏览器可能对此进行了限制。

四、总结

通过JavaScript获取访问者的IP地址可以通过使用第三方API、结合服务器端代码或利用WebRTC技术来实现。使用第三方API（如ipify、ipinfo）是最简单和常见的方法，而结合服务器端代码（如Node.js和Express）可以提供更灵活和安全的解决方案。WebRTC技术可以获取本地IP地址，但存在一定的安全和隐私风险。根据实际需求选择合适的方法，以确保功能实现的同时，保护用户隐私和数据安全。