Angular15部署请求IP问题：如何让请求以前端服务器IP发起？

我的应用前端基于Angular 15、后端为ASP.NET API，二者均部署在IIS 8.5服务器上。测试时发现，前端发送的REST请求使用的是测试人员的客户端IP，而非前端部署服务器的IP，导致了一些问题。想请教如何让Angular前端的所有请求都以服务器IP发起。

更新1：请求实现代码 #

组件.ts文件中：

this.persistenceService.save(this.info).subscribe(
  data => {
    console.log(data);
  });

persistenceService中的代码：

save(info: CustomObject): Observable<any> {
return this.http.post('https://backend.com', info, {headers: {'Content-Type': 'application/json'}});
}

Angular作为单页应用，默认由用户浏览器直接向后端API发送请求，因此后端获取到的是客户端IP。要让请求以前端服务器IP发起，需通过IIS反向代理实现：让前端先把请求发送到自身部署的IIS服务器，再由IIS转发到后端API，这样后端收到的请求就来自前端服务器的IP。

具体步骤如下：

1. 修改Angular请求路径为相对路径 #

将persistenceService中的绝对URL改为相对路径，比如把https://backend.com替换为/api（可根据实际需求调整路径前缀）：

save(info: CustomObject): Observable<any> {
  return this.http.post('/api', info, {headers: {'Content-Type': 'application/json'}});
}

修改后，前端会把请求发送到当前域名的/api路径，也就是前端部署的IIS服务器。

2. 在IIS中配置反向代理 #

前提条件 #

确保IIS已安装以下模块：

• URL Rewrite：用于URL规则匹配与重写
• Application Request Routing (ARR)：用于实现反向代理转发

如果未安装，可通过IIS管理器的「模块」功能搜索安装，或从微软官方渠道下载安装包。

配置步骤 #

1. 打开IIS管理器，找到前端应用所在的网站，双击「URL重写」。
2. 点击右侧「添加规则」，选择「反向代理规则」。
3. 在「输入要转发的服务器名称或IP地址」中填写后端API的完整地址（如https://backend.com）。
4. 勾选「启用反向代理」，点击「确定」。
5. 若需要更精细的路径匹配（比如只转发/api开头的请求），可编辑生成的规则：
   • 修改「匹配URL」的模式为^api/(.*)
   • 修改「重写URL」为https://backend.com/{R:1}（{R:1}用于保留原请求的路径参数）
6. 保存规则后，重启IIS网站。

3. 验证效果 #

测试前端请求，此时后端API收到的请求来源IP应为前端部署服务器的IP，而非客户端IP。同时，由于请求通过IIS代理转发，前端与后端的跨域问题也会自动解决（无需额外配置后端CORS）。

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