Angular 4中不依赖第三方API，用TypeScript获取公网IP可行吗？

嗨，我来帮你理清楚这个问题哈～首先得明确一点：纯前端代码是没办法直接获取用户的公网IP的。原因很简单：浏览器的安全机制限制了前端JS的权限，它只能访问到用户设备的内网IP（比如192.168.x.x这类局域网地址），而公网IP是运营商分配给用户网络网关的地址，这个信息只有当你的前端向某个服务器发起请求时，服务器才能从请求的源地址里拿到。

那针对你的Angular 4项目，我给你两个可行的方向：

1. 搭建自己的后端接口获取IP #

这是最可控的方案，你可以用任何后端语言（比如Node.js/Express、Java Spring Boot等）写一个简单的接口，当Angular前端请求这个接口时，后端从请求头里提取客户端的公网IP并返回。

举个Node.js/Express的后端示例：

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

// 如果你的后端部署在反向代理（比如Nginx）后面，需要开启trust proxy才能拿到真实IP
app.set('trust proxy', true);

app.get('/get-public-ip', (req, res) => {
  // 获取公网IP，优先取X-Forwarded-For（反向代理场景），否则用req.ip
  const publicIp = req.headers['x-forwarded-for'] || req.ip;
  res.json({ ip: publicIp });
});

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

然后在你的Angular 4项目里，用HttpClient调用这个接口：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class IpService {
  constructor(private http: HttpClient) {}

  getPublicIp() {
    return this.http.get('http://your-backend-domain.com/get-public-ip');
  }
}

在组件里使用：

import { Component, OnInit } from '@angular/core';
import { IpService } from './ip.service';

@Component({
  selector: 'app-ip',
  template: '<p>你的公网IP是: {{ publicIp }}</p>'
})
export class IpComponent implements OnInit {
  publicIp: string;

  constructor(private ipService: IpService) {}

  ngOnInit() {
    this.ipService.getPublicIp().subscribe((data: any) => {
      this.publicIp = data.ip;
    });
  }
}

2. 为什么第三方API是常用选择？ #

你提到不想用第三方API，但其实这类API的本质和你自己搭后端是一样的——它们的服务器接收你的请求，然后返回从请求里拿到的公网IP。如果实在不想依赖第三方，那自己搭后端是唯一的纯自主方案，没有其他纯前端的办法能直接拿到公网IP。

另外，网上有些提到用WebRTC获取IP的方案，其实拿到的大多是内网IP或者NAT转换后的地址，并不是真正的公网IP，而且兼容性很差，不建议在生产环境使用。

内容的提问来源于stack exchange，提问作者Nikson