部署React应用至Azure静态网站时的MSAL认证异常

安全阿岳

2026-8-16

排查方向

验证运行时MSAL配置的实际值
在浏览器控制台执行 console.log(msalInstance.config)，查看运行时的redirectUri是否为SWA的实际域名（如https://xxx.azurestaticapps.net）。如果仍显示localhost:3000，说明配置未正确生效——排查环境变量注入是否有误，比如生产环境的REACT_APP_REDIRECT_URI是否在SWA部署时正确设置，避免本地开发的.env文件内容被打包到生产构建中。
核对Azure AD B2C应用注册的重定向URI
1. 确认重定向URI添加在**单页应用(SPA)**分类下，而非Web应用分类（React SPA依赖PKCE流程，必须对应SPA类型的URI配置）。
2. 确保URI是精确的HTTPS地址，包含完整域名（若有回调路径需一并添加，比如https://xxx.azurestaticapps.net/auth-callback），无拼写或格式错误。
3. 检查当前使用的clientId对应的应用注册是否正确，避免误操作了其他应用的配置。
清理部署缓存与重新构建
1. 本地重新执行生产构建命令（如npm run build），确保构建过程加载的是生产环境配置，避免旧的localhost配置被打包进产物。
2. 部署到SWA时，强制清除部署缓存，或在SWA部署中心设置禁用缓存，保证新构建的产物被正确替换。
检查路由与认证请求配置
1. 确认SWA已配置路由回退规则：在staticwebapp.config.json中添加路由配置，确保所有路径都指向index.html，避免认证回调时路径无法匹配导致重定向错误。示例配置：
```
{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}
```
2. 检查authenticationRequest对象是否单独设置了redirectUri，若有需确保该值为生产环境地址，避免覆盖msalInstance的全局配置。
排除客户端缓存干扰
使用浏览器无痕模式测试，或手动清除浏览器缓存后重新访问SWA站点，排除客户端缓存的旧认证会话、配置残留导致的异常。