配置React使HTTPS请求通过前端IP而非客户端IP发起

问题根源是：你的React前端是静态应用，用户浏览器会直接向后端发起请求，所以后端识别到的是用户的公网IP，而非前端App Service的VNet内部IP，触发了IP限制的403错误。不需要切换到Next.js，通过以下配置就能解决：

1. 给前端App Service配置反向代理规则 #

根据你的前端App Service运行环境（Windows/Linux）添加代理规则，把前端的API请求转发到后端的Private Endpoint地址：

Windows环境（web.config） #

在前端部署包的根目录添加/修改web.config，加入重写规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 把/api开头的请求转发到后端Private Endpoint -->
        <rule name="Proxy to Backend API" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="https://[你的后端Private Endpoint域名]/api/{R:1}" />
          <serverVariables>
            <set name="HTTP_X_FORWARDED_FOR" value="{REMOTE_ADDR}" />
            <set name="HTTP_X_FORWARDED_PROTO" value="{HTTPS}" />
          </serverVariables>
        </rule>
        <!-- 保留React SPA路由规则 -->
        <rule name="React SPA Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Linux环境（.htaccess） #

在前端部署包的根目录添加.htaccess文件：

RewriteEngine On

# 代理API请求到后端Private Endpoint
RewriteRule ^api/(.*)$ https://[你的后端Private Endpoint域名]/api/$1 [P,L]

# React SPA路由支持
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

2. 启用前端App Service的VNet集成 #

确保前端App Service已加入到你的VNet的前端子网中：

• 进入前端App Service的「网络」设置页面
• 选择「VNet集成」，点击「添加VNet」
• 选择你已创建的Virtual Network和对应的前端子网，完成集成配置

这样前端App Service就能在VNet内部访问后端的Private Endpoint了。

3. 调整前端代码的请求路径 #

把前端代码中所有调用后端的请求地址改成相对路径，比如原来的https://backend.example.com/api/getData改成/api/getData，这样请求会先发送到前端App Service，再被代理到后端。

4. 验证后端的访问控制配置 #

• 确认后端App Service的「网络」设置中，「访问限制」只允许VNet内部访问，或者直接依赖Private Endpoint的访问控制（Private Endpoint默认只允许VNet内资源访问）
• 若后端有额外IP白名单配置，确保前端子网的IP段被允许访问

为什么不需要切换到Next.js？ #

Next.js的API路由本质是在服务器端发起请求，后端会识别到Next.js App Service的IP，但这和上面的代理方案逻辑一致——都是让服务器端（前端App Service）作为中转转发请求，而非让用户浏览器直接访问后端。纯React应用通过App Service的代理配置就能实现同样的效果，完全不需要重构项目。

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