Angular中调用Web API并携带用户IP地址的实现方法

方案1：前端直接调用（仅适用于外部接口支持CORS的场景） #

这种方案请求直接从用户终端浏览器发往外部接口，外部接口默认获取到的源IP就是终端用户的公网IP，无需额外做IP透传处理。

实现步骤 #

• 首先在app.module.ts中导入HttpClientModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 封装HTTP服务调用外部POST接口

// api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ApiService {
  // 替换为实际外部接口地址
  private EXTERNAL_API_URL = 'https://xxx.xxx/xxx';

  constructor(private http: HttpClient) {}

  postToExternalApi(reqData: any): Observable<any> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });
    return this.http.post(this.EXTERNAL_API_URL, reqData, { headers });
  }
}

方案限制 #

• 外部接口必须配置CORS跨域规则，允许你的前端域名发起请求，否则浏览器会直接拦截跨域请求
• 所有请求参数、鉴权密钥都会暴露在浏览器端，仅适合无敏感鉴权信息的公开接口

方案2：自有后端代理转发（通用推荐方案） #

这种方案解决了CORS和敏感信息泄露问题，是生产环境的常用方案，仅需在后端转发时透传终端用户IP即可。

实现逻辑 #

1. Angular端将POST请求发给你自己的后端接口，无跨域问题，代码和方案1基本一致，仅需要把请求地址替换为自有后端接口地址即可
2. 后端接收到前端请求后，先获取终端用户的真实IP：
   • 如果后端前面有Nginx、CDN等反向代理层，需要先配置代理层透传用户IP，Nginx配置参考：

   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   

   • 后端从X-Real-IP或X-Forwarded-For请求头中读取用户真实IP
3. 后端转发请求到外部接口时，将读取到的用户IP放到请求头的X-Forwarded-For、X-Real-IP字段中，绝大多数外部接口都会默认从这两个字段读取真实用户IP，如果外部接口有自定义IP头字段，按对方要求调整即可

方案优势 #

• 无CORS限制，不需要外部接口做额外调整
• 接口鉴权密钥等敏感信息可以存在后端，不会泄露
• 兼容性强，适配所有生产场景

• 无论用哪种方案，外部接口只能拿到用户的公网出口IP，无法获取用户内网的私有IP，这是公网通信的正常限制
• 使用代理方案前可以提前和外部接口提供方确认IP读取规则，避免透传后识别异常

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