前端获取用户的公网 IP 地址

可以使用免费的免费的公共服务网站

一:https://www.ipify.org/

获取 JSON 格式的 IP 地址

// 旧地址不好使
// https://api.ipify.org/?format=json
// 新地址
https://api64.ipify.org/?format=json

 二:https://ipinfo.io/

https://ipinfo.io/

三:使用服务器端JavaScript(Node.js)

const express = require('express');
const app = express();
const ip = require('ip'); // 使用ip库来获取客户端IP
 
app.get('/get-ip', (req, res) => {
  let ipAddress = req.headers['x-forwarded-for'] || req.socket.remoteAddress;
  res.send(ipAddress);
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
### 实现 Vue.js 中获取用户 IP 地址的功能 在 Vue.js 项目中,可以通过调用第三方 API 来实现获取用户 IP 地址的功能。以下是具体的方法: #### 方法描述 可以在组件的 `data` 函数中定义一个变量用于存储用户IP 地址,在生命周期钩子函数 `mounted()` 中调用自定义方法来获取IP 地址并将其赋值给数据属性。 ```javascript export default { data() { return { ipAddress: "" // 存储用户IP地址 }; }, mounted() { this.getIPAddress(); }, methods: { getIPAddress() { const url = "https://api.ipify.org?format=json"; // 使用 ipify 的公共API this.axios .get(url) .then(response => { this.ipAddress = response.data.ip; // 将返回的数据中的ip字段赋值给this.ipAddress console.log(this.ipAddress); }) .catch(error => { console.error("无法获取IP地址:", error); // 错误处理 }); } } }; ``` 上述代码片段展示了如何利用 Axios 库发起 HTTP 请求到指定 URL 并解析响应数据[^1]。需要注意的是,这里使用的 API 是来自 ipify 组织提供的免费服务,它能够简单快速地提供客户端公网 IP 地址。 另外,如果还需要进一步基于此 IP 定位到具体的地理位置或者城市名称,则可以考虑集成其他地理信息服务提供商比如百度地图所提供的接口[^2]。不过这通常涉及更复杂的流程以及可能需要申请相应的开发者密钥等准备工作。 #### 注意事项 - 确保已安装 axios 或者类似的 HTTP 客户端库以便于执行网络请求操作。 - 如果目标环境存在跨域资源共享 (CORS) 限制,请确认所选外部 API 支持 CORS 访问控制机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值