React+Express跨服务器部署后公网API调用404问题解决

环境概述 #

• 前端：React + TypeScript，部署在Windows Server 2019的IIS中，已配置URL Rewrite与Application Request Routing（AAR）
• 后端：Express API，部署在Linux服务器，通过NGINX配置了内部CA签发证书及GoDaddy官方HTTPS证书
• 数据库：PostgreSQL
• 公网暴露：通过Microsoft Entra（原Azure AD）配置企业应用，公网地址https://WebApp.Company.com/Board可正常访问前端页面

问题现象 #

内部网络环境下，前端调用https://APIServer/api/deplist可正常获取数据；通过公网访问时，预期通过https://WebApp.Company.com/api/deplist反向代理到内部API，但实际返回404错误，需求为不直接暴露内部API地址，仅通过Entra保护的公网域名完成API交互。

解决方案 #

问题核心为API请求路径未匹配IIS的URL Rewrite规则：

• 前端公网访问的根路径是https://WebApp.Company.com/Board，但原API请求的基础地址写为https://WebApp.Company.com，导致请求路径https://WebApp.Company.com/api/deplist无法触发IIS上的代理规则
• 修改React应用中的API基础URL为https://WebApp.Company.com/Board，使API请求变为https://WebApp.Company.com/Board/api/deplist，该路径成功匹配IIS的反向代理规则，问题解决

附：IIS URL Rewrite配置代码 #

<configuration>
  <system.webServer>
    <httpErrors errorMode="Detailed" />
    <asp scriptErrorSentToBrowser="true" />
    <rewrite>
      <rules>
        <!-- API反向代理规则 -->
        <rule name="API Reverse Proxy" stopProcessing="true">
          <match url="^api/(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{HTTP_HOST}" pattern=".*" />
          </conditions>
          <action type="Rewrite" url="https://APIServer/api/{R:1}" />
        </rule>

        <!-- React路由规则 -->
        <rule name="React 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="/Board/" />
        </rule>
      </rules>
      <outboundRules>
        <preConditions>
          <preCondition name=".*" patternSyntax="Wildcard" />
        </preConditions>
      </outboundRules>
    </rewrite>
  </system.webServer>
</configuration>

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