React Azure静态Web应用AAD认证后重定向404问题

问题背景 #

作为React.js新手，开发了一个需要Azure Active Directory（AAD）认证才能访问authenticated-map页面的应用，采用Azure静态Web Apps的自定义AAD V1认证方案。已完成以下步骤：

• 导航栏添加Login按钮，通过react-router-dom跳转至LoginPage
• LoginPage通过window.location.href指向AAD登录地址并指定跳转目标页面
• 配置staticwebapp.config.json，设置/authenticated-map路由需authenticated角色访问，同时配置AAD身份提供商
• Azure门户注册AAD应用（从Single Page Application改为Website类型），配置重定向URI并存储client_id和client_secret到静态Web应用设置

部署后登录流程中已解决AADSTS50011（重定向URI不匹配）和AADSTS9002325（应用类型问题）错误，但登录成功跳转至https://<my-static-app>.azurestaticapps.net/authenticated-map时出现404 Not Found，对应页面组件已创建但无法显示。

核心原因与解决方案 #

1. 配置SPA路由Fallback（最常见原因） #

React单页应用（SPA）的路由由前端处理，Azure静态Web Apps默认会直接寻找对应路径的静态文件，导致子路由出现404。需在staticwebapp.config.json中添加Fallback路由，将所有未匹配的请求指向index.html，同时确保受保护路由的配置优先级高于Fallback：

{
  "routes": [
    // 先配置受保护的路由
    {
      "route": "/authenticated-map",
      "allowedRoles": ["authenticated"]
    },
    // 再配置Fallback，处理所有其他路由
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ],
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "v1": {
          "clientId": "<你的Client ID>",
          "clientSecret": "<你的Client Secret>"
        }
      }
    }
  }
}

2. 修正Login跳转逻辑，通过Azure认证中间层处理 #

直接跳转AAD登录地址会绕过Azure静态Web Apps的认证会话管理，导致回调后路由无法被SPA正确处理。应改为跳转至静态Web Apps的认证端点，由中间层处理AAD登录和会话维护：

// LoginPage组件中的跳转代码
const handleLogin = () => {
  const targetUrl = encodeURIComponent('/authenticated-map');
  window.location.href = `${window.location.origin}/.auth/login/aad?post_login_redirect_uri=${targetUrl}`;
};

3. 确认React路由配置正确性 #

检查react-router-dom的路由配置是否正确注册了authenticated-map页面，确保使用BrowserRouter而非HashRouter（静态Web Apps推荐前者配合Fallback配置）：

// 示例路由配置（App.js）
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import AuthenticatedMap from './components/AuthenticatedMap';
import LoginPage from './components/LoginPage';
import Navbar from './components/Navbar';
import Home from './components/Home';

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/authenticated-map" element={<AuthenticatedMap />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

4. 清理缓存并重新部署 #

GitHub Action部署可能存在缓存，导致旧配置未更新。可手动触发重新部署，或在build步骤前添加缓存清理命令：

• Linux/macOS：rm -rf build
• Windows：rd /s /q build

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