Angular中如何获取代理服务器后的客户端真实IP地址？

核心结论 #

Angular作为纯前端框架，无法直接访问类似ASP.NET中HTTP_X_FORWARDED_FOR这类服务器端变量——这类变量存储在服务器接收请求的上下文环境中，前端代码运行在客户端浏览器内，没有权限直接读取服务器的请求上下文数据。

可行实现方式 #

1. 后端接口传递IP（推荐） #

这是和ASP.NET获取HTTP_X_FORWARDED_FOR逻辑对齐的可靠方案：

• 后端（无论使用ASP.NET、Node.js还是其他服务端技术）在处理请求时，从请求头或服务器变量中提取真实IP（比如X-Forwarded-For、X-Real-IP，或是ASP.NET的Request.UserHostAddress）。
• 后端提供一个接口，将提取到的IP返回给Angular前端。
• Angular通过HttpClient调用该接口获取IP。

示例代码：

ASP.NET Core后端示例

[HttpGet("client-ip")]
public IActionResult GetClientIp()
{
    var ipAddress = Request.Headers["X-Forwarded-For"].FirstOrDefault();
    if (string.IsNullOrEmpty(ipAddress))
    {
        ipAddress = Request.HttpContext.Connection.RemoteIpAddress?.ToString();
    }
    return Ok(new { Ip = ipAddress });
}

Angular前端示例

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

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

  getClientIp() {
    return this.http.get<{ Ip: string }>('/api/client-ip');
  }
}

2. 前端第三方API调用（原方案） #

如果没有后端支持，只能继续使用第三方IP查询API，但这种方式仅能获取客户端的公网IP，无法处理内网或多层代理场景——第三方API只能拿到请求自身的客户端IP，若用户处于内网或经过代理，返回的可能是代理服务器的IP，而非用户设备的真实内网IP。

关键区别 #

• ASP.NET的HTTP_X_FORWARDED_FOR是服务器在接收请求时，从请求头中获取的代理传递的客户端真实IP，属于服务器端上下文数据。
• Angular作为前端，运行在客户端环境，只能通过后端传递或第三方API间接获取IP，无法直接读取服务器的请求变量。

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