在Azure静态Web应用中配置Angular应用Entra ID身份验证遇错求助

核心问题 #

你的配置错误在于路由规则过于宽泛，"route": "/*"会匹配所有请求，包括Angular应用的静态资源（CSS、JS、图片等）。当这些静态资源请求未通过认证时，会被responseOverrides重定向到登录页（HTML内容），导致浏览器接收到的资源类型和预期不符，触发MIME类型错误。

移除responseOverrides后，静态资源直接返回401，但Cookie有效却仍有失败，是因为部分静态资源请求可能在认证Cookie尚未完全生效时发起，或者路由规则拦截了合法的静态资源请求。

修复后的staticwebapp.config.json配置 #

调整路由规则，先放行静态资源，再对所有其他路径强制认证：

{
  "navigationFallback": {
    "rewrite": "index.html"
  },
  "routes": [
    // 放行Angular静态资源路径
    {
      "route": "/assets/*",
      "allowedRoles": ["anonymous"]
    },
    // 放行所有静态资源文件后缀
    {
      "route": "/*.js",
      "allowedRoles": ["anonymous"]
    },
    {
      "route": "/*.css",
      "allowedRoles": ["anonymous"]
    },
    {
      "route": "/*.svg",
      "allowedRoles": ["anonymous"]
    },
    {
      "route": "/*.png",
      "allowedRoles": ["anonymous"]
    },
    {
      "route": "/*.ico",
      "allowedRoles": ["anonymous"]
    },
    // 对所有其他路径强制认证
    {
      "route": "/*",
      "allowedRoles": ["authenticated"],
      "headers": {
        "Cache-Control": "no-store"
      }
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  },
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "ISSUER",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
}

关键调整说明 #

1. 优先放行静态资源：Azure Static Web Apps的路由匹配是按顺序执行的，所以把静态资源的放行规则放在最前面，确保这些请求不会被后续的认证拦截规则匹配。
2. 覆盖常见静态资源后缀：根据Angular应用的实际资源类型补充对应的路由规则，避免遗漏导致部分资源仍被拦截。
3. 保留responseOverrides：修复路由规则后，responseOverrides只会作用于真正的页面路由请求（而非静态资源），此时重定向到登录页是正确的行为。

额外验证点 #

• 确认ISSUER、AZURE_CLIENT_ID、AZURE_CLIENT_SECRET等配置项已在Azure门户的静态Web应用设置中正确配置。
• 测试时清除浏览器缓存，避免旧的Cookie或缓存资源干扰验证结果。

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