Azure静态Web应用（Next.js+Umami）如何获取真实客户端IP

核心解决方案 #

将Umami的CLIENT_IP_HEADER环境变量设置为X-Azure-FD-ClientIP，这个请求头由Azure Front Door直接注入，存储的是原始客户端的真实IP地址。

具体操作步骤 #

1. 配置Azure Static Web Apps环境变量

   • 登录Azure门户，找到你的Static Web Apps资源
   • 进入配置 > 环境变量页面
   • 添加新的环境变量：
     • 名称：CLIENT_IP_HEADER
     • 值：X-Azure-FD-ClientIP
   • 保存配置，Static Web Apps会自动重启应用生效

2. 验证Front Door的请求头传递
   Azure Front Door默认会在转发请求时添加X-Azure-FD-ClientIP头，无需额外配置。如果之前自定义过Front Door的规则，检查是否存在移除该请求头的操作，确保它能被正常传递到Static Web Apps。

3. 验证IP获取效果
   部署完成后，访问你的网站并查看Umami的访问记录，此时应该能看到真实的客户端IP和对应的地区信息。

为什么之前的X-Forwarded-For/X-Real-IP无效？ #

• X-Forwarded-For：当请求经过Front Door和Static Web Apps后，这个头会被追加多个IP（格式为真实IP, Front Door IP, Static Web Apps IP），Umami默认不会自动解析取第一个IP，导致获取到的是最后一个节点的IP。
• X-Real-IP：Azure Static Web Apps不会自动设置这个头为真实客户端IP，所以返回的是Static Web Apps自身的节点IP。

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