如何获取托管client-side js应用的服务器发起后端请求时的IP地址

首先明确核心逻辑：当前请求是终端用户的浏览器直接发送给后端服务，请求链路未经过托管React应用的服务器，因此默认无法直接获取托管服务器IP，无需手动硬编码IP的可行方案如下：

方案1：利用浏览器自动携带的请求头（无侵入，几乎无需改代码） #

适用场景：托管React应用的站点，页面访问源（IP/域名+端口）可唯一对应托管服务器身份

• 浏览器发起请求时会自动携带Origin（跨域请求必带）或Referer（同域请求默认携带）头，头的值为当前React页面的源地址，包含托管服务器的IP或域名信息
• 只需在后端Nginx配置中透传该头到上游ASP.NET Core服务即可，配置示例：

location /api/ {
    proxy_pass http://你的aspnet_core服务地址;
    # 透传原生请求头
    proxy_set_header Origin $http_origin;
    proxy_set_header Referer $http_referer;
    # 保留原有其他代理配置
}

• 后端代码直接读取对应请求头，提取IP信息即可：如果是IP直接访问的站点，头值会直接包含托管服务器IP；如果是域名访问，可在后端做域名到IP的解析映射即可。

方案2：托管端自动注入IP，前端请求自动携带（更精准，不受域名映射影响） #

适用场景：托管服务器无独立域名、多台服务器共用域名的场景，无需手动为每台服务器配置IP

1. 所有托管React静态页的服务器统一使用如下Nginx配置，自动注入当前服务器IP到静态页面中：

# 定义服务器IP变量，$server_addr为Nginx绑定的服务IP，如需公网IP可通过环境变量传入
set $host_ip $server_addr;

location / {
    root /react静态文件存放目录;
    index index.html;
    # 开启内容替换，将html中的占位符替换为实际IP
    sub_filter '__REACT_HOST_PLACEHOLDER__' '$host_ip';
    sub_filter_once on;
    sub_filter_types text/html;
}

如果托管React的Nginx也部署在Docker中，启动容器时将宿主机IP传入环境变量即可：

docker run -e HOST_IP=$(curl -s https://ifconfig.me) 你的react镜像名

对应Nginx调整变量读取即可：set $host_ip $HOST_IP;
2. 在React项目的index.html中加入全局变量占位：

<script>
window.REACT_HOST_IP = '__REACT_HOST_PLACEHOLDER__';
</script>

3. 全局封装Axios/Fetch，自动为所有请求添加自定义头：X-React-Host-IP: window.REACT_HOST_IP
4. 后端Nginx透传该自定义头到上游服务，直接读取即可。

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