Azure Front Door访问React应用跳转至App Service URL问题解决咨询

这问题我之前帮好几个开发者排查过，核心原因大概率是React应用的路由配置、App Service的重定向/默认文档设置和Front Door的路由规则没配合好——毕竟你把WebApp和API部署在不同子目录，两者的服务特性不一样，WebApp作为单页应用更容易触发不必要的跳转。下面给你一步步的排查和解决方法：

首先得确保Front Door对/webapp路径的转发逻辑是正确的，别不小心设成了重定向：

• 登录Azure门户，打开你的Front Door资源，找到对应路由规则（针对/webapp的那条）
• 确认路由类型是Forward，而非Redirect
• 检查自定义转发路径：因为你的React应用部署在App Service的site\wwwroot\webapp，这里要设置为/webapp{remainingPath}，这样Front Door会把请求完整转发到App Service的/webapp路径下，不会丢路径信息
• 开启URL重写选项，确保请求头里的Host被设置为你的App Service域名（example.azurewebsite.net）——App Service有时候会因为Host不匹配触发自动重定向

React单页应用部署在非根目录时，路由和资源路径很容易出问题，得做两处关键配置：

• 在项目的package.json里添加"homepage": "/webapp"，这样打包后的静态资源（JS/CSS/图片）会自动带上/webapp前缀，避免加载资源时跳转到根域名
• 如果用了React Router，一定要设置basename为/webapp，确保路由跳转时不会脱离子目录：

  <BrowserRouter basename="/webapp">
    {/* 你的路由组件内容 */}
  </BrowserRouter>
  

• 重新打包React应用，再部署到App Service的site\wwwroot\webapp目录

App Service的默认设置可能会让/webapp路径触发根目录的重定向，得手动调整：

• 进入App Service的配置 -> 默认文档，添加webapp/index.html并移到最顶部，这样访问example.azurewebsite.net/webapp时，会直接加载React的入口文件，而不是触发根目录的默认文档逻辑
• 检查配置 -> 重定向：如果开启了自动HTTPS重定向，确保规则不会错误地把/webapp路径重定向到根域名；或者可以设置更精细的重定向规则，只针对根目录生效
• 在site\wwwroot\webapp目录下添加web.config文件，配置URL重写规则——这不仅能解决React路由刷新404的问题，还能避免不必要的重定向：

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <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" />
              <add input="{REQUEST_URI}" pattern="^/webapp/" />
            </conditions>
            <action type="Rewrite" url="/webapp/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

如果你的Front Door开启了缓存，可能缓存了旧的重定向响应，导致测试时看不到新配置的效果：

• 进入Front Door的缓存规则，检查针对/webapp路径的缓存设置，暂时禁用缓存或者手动触发缓存清除，然后再测试访问

按顺序测试，确认每一步都生效：

1. 先直接访问example.azurewebsite.net/webapp，确认页面正常加载，不会跳转到其他地址
2. 再访问example.azurewebfd.net/webapp，检查是否还会跳转到App Service域名
3. 测试React应用内的路由跳转，确保所有页面都能正常加载，路径始终保留/webapp前缀

至于API路径正常的原因也很好理解：API是后端服务，没有单页应用的路由依赖，而且API的部署目录默认文档（比如Web.config里的API路由前缀）配置正确，所以不会触发重定向逻辑。

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