当前位置:首页 > JavaScript

js实现ip

2026-04-05 13:36:59JavaScript

获取客户端IP地址(前端JavaScript)

在浏览器环境中,JavaScript无法直接获取用户的真实IP地址,但可以通过以下方法获取客户端IP的近似信息:

使用WebRTC获取本地IP

function getLocalIP() {
  return new Promise((resolve, reject) => {
    const RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    const pc = new RTCPeerConnection({ iceServers: [] });
    const noop = () => {};

    pc.createDataChannel('');
    pc.createOffer().then(offer => pc.setLocalDescription(offer, noop, noop));
    pc.onicecandidate = (ice) => {
      if (!ice || !ice.candidate || !ice.candidate.candidate) return;
      const ip = ice.candidate.candidate.split(' ')[4];
      resolve(ip);
      pc.onicecandidate = noop;
    };
  });
}

getLocalIP().then(ip => console.log('Local IP:', ip));

通过第三方API获取公网IP

async function getPublicIP() {
  try {
    const response = await fetch('https://api.ipify.org?format=json');
    const data = await response.json();
    return data.ip;
  } catch (error) {
    console.error('Error fetching IP:', error);
    return null;
  }
}

getPublicIP().then(ip => console.log('Public IP:', ip));

服务器端获取IP(Node.js示例)

在Node.js后端环境中,可以通过以下方式获取客户端IP:

js实现ip

const express = require('express');
const app = express();

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

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

注意事项

  • 前端获取的IP可能不准确(受VPN/代理影响)
  • WebRTC方法可能被浏览器隐私设置阻止
  • 第三方API可能有速率限制
  • 真实生产环境应结合后端服务验证IP

常用IP API服务

  1. ipify.org(免费)
  2. ip-api.com(免费/付费)
  3. ipinfo.io(付费)
  4. BigDataCloud(免费套餐)

标签: jsip
分享给朋友:

相关文章

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

js实现目录

js实现目录

实现目录的基本思路 在JavaScript中实现目录功能通常涉及以下几个核心步骤:解析文档中的标题元素(如h1-h6),动态生成目录结构,并添加交互逻辑(如点击跳转)。以下是具体实现方法: 解析标题…