如何让 Vue 项目知IP地址地址在- 依赖后端需要配置后端服务增加系统复杂性
作者：网络发烧程序猿 |
发布时间：2025-06-30 |
如何让 Vue 项目知道自己的 IP 地址？
获取用户的 IP 地址在 Vue 项目中是一个常见需求，以下有三种常见的方法：
1. 使用第三方 API 获取
简单来说，就是借助在线服务来查询 IP。 像ipify、ipinfo这样的服务，提供免费的接口查询。
优点：
- 简单易用：调用 API 解析 JSON 数据即可。
- 广泛支持：大多数现代浏览器都支持 Fetch API 进行 HTTP 请求。
- 可靠性高：这些服务通常都很稳定。
2. 通过 WebRTC 获取
WebRTC 技术可以让浏览器直接获取本地 IP 地址。
优点：
- 无需外部服务：直接通过浏览器获取。
- 获取局域网 IP：适用于内网应用。
- 代码相对复杂：需要处理 WebRTC API。
3. 后端接口获取
后端可以通过请求头中的信息来获取客户端的 IP 地址。
后端代码示例（Node.js + Express）：
```javascript
app.get('/get-ip', (req, res) => {
const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
res.send(ip);
});
```
前端代码示例：
```javascript
axios.get('/get-ip')
.then(response => {
console.log('IP Address:', response.data);
});
```
优点：
- 安全性高：IP 地址由服务器获取，前端不暴露获取逻辑。
- 准确性高：依赖于服务器配置，能准确获取用户的公共 IP 地址。
- 依赖后端：需要配置后端服务，增加系统复杂性。
总结与建议
| 方法 | 优点 | 缺点 |
| --- | --- | --- |
| 使用第三方 API | 简单易用，适合大多数场景 | 依赖第三方服务 |
| 通过 WebRTC 获取 | 无需外部服务，适用于内网应用 | 代码复杂 |
| 后端接口获取 | 安全性高，准确性高 | 依赖后端服务 |
根据具体需求选择合适的方法。快速开发选第三方 API，追求安全和准确性选后端接口，需要获取局域网 IP 则选 WebRTC。