Angular v16路由在Azure App Service自定义域名刷新失效问题

问题原因 #

Angular是单页应用（SPA），客户端路由仅在浏览器端生效。刷新页面时，浏览器会直接向服务器请求对应路径的资源，而服务器上不存在该路径的物理文件。Azure默认域名对应的服务通常已自动配置回退路由规则（将所有非静态资源请求指向index.html），但自定义域名绑定后，对应的服务器配置可能缺失该规则，导致请求返回404或回退到默认页面。

解决方案 #

情况1：部署在Azure Static Web Apps #

• 在项目根目录创建staticwebapp.config.json文件，添加以下配置：

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*", "/js/*"]
  }
}

该配置会将所有非静态资源的请求重定向到index.html，同时排除图片、CSS、JS等静态文件，确保这些资源正常加载。

• 重新部署应用到Azure Static Web Apps，确认自定义域名已正确绑定并生效。

情况2：部署在Azure App Service #

方法1：通过Azure门户配置

1. 登录Azure门户，进入目标App Service资源。
2. 左侧菜单选择配置 > 常规设置，将index.html移至默认文档列表的最顶部。
3. 进入配置 > 路径映射 > 重写规则，点击添加规则：
   • 规则名称：例如SPA-Route-Rewrite
   • 重写条件：REQUEST_URI 不匹配 ^/(api|images|css|js)/.*（根据你的静态资源路径调整）
   • 重写规则：index.html
4. 保存配置后重启App Service，测试自定义域名下的路由刷新功能。

方法2：使用web.config文件（Windows App Service）

在项目根目录创建web.config文件，添加以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular 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>

将该文件包含在部署包中，重新部署应用即可。

额外检查 #

确认自定义域名的DNS配置正确，所有路径的请求均指向正确的Azure服务端点，未被CDN或其他中间层拦截导致路由规则失效。

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