React+DotNet部署后Microsoft Entra ID登录报endsWith未定义错误

核心错误分析 #

该错误来自MSAL.js的transformCIAMAuthority方法，本质是前端获取的authority配置异常（未正确加载或格式错误），导致内部逻辑调用endsWith时，目标对象为undefined。

针对性解决方案 #

1. 修复前端环境变量的加载与格式 #

部署到Azure App Service后，环境变量常出现以下问题：

• 移除多余引号：环境变量值不要用引号包裹（比如示例中REACT_APP_CLIENT_ID="fe-clientid"的引号会被当作值的一部分，导致配置失效）。Azure App Service的「应用程序设置」中，直接填写fe-clientid这类纯字符串值即可。
• 校验Authority格式：确保REACT_APP_AUTHORITY严格遵循https://login.microsoftonline.com/[tenant-id]格式，末尾不要加斜杠，tenant-id为纯字符串（无引号、空格等多余符号）。
• 确认变量注入：检查Azure App Service中所有REACT_APP_前缀的变量是否已正确配置，且部署流程未遗漏变量注入（比如通过GitHub Actions构建时需同步生产环境变量）。

2. 规范MSAL初始化配置 #

检查authConfig文件，确保MSAL实例初始化时直接读取环境变量，无额外拼接错误：

// 正确示例
export const msalConfig = {
  auth: {
    clientId: process.env.REACT_APP_CLIENT_ID,
    authority: process.env.REACT_APP_AUTHORITY,
    redirectUri: process.env.REACT_APP_REDIRECT_URI,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  }
};

避免对authority做手动字符串拼接，防止出现undefined。

3. 验证前端部署方式 #

如果前端以静态文件部署：

• 若本地build后上传，需在构建时注入正确的生产环境变量；若用Azure自动构建（如GitHub Actions），确保构建阶段已加载Azure的应用程序设置。
• 确认App Service的「静态网站」配置中，默认文档设为index.html，避免路由问题导致MSAL初始化失败。

4. 后端认证配置联动检查 #

虽然错误出在前端，但后端配置也可能间接影响：

• 确保后端AzureAd配置的TenantId与前端REACT_APP_AUTHORITY中的tenant-id完全一致。
• 检查后端API的应用注册，已正确添加前端Azure App Service的重定向URI（格式如https://<your-webapp>.azurewebsites.net/），且已启用「ID令牌」和「访问令牌」颁发。

快速验证步骤 #

1. 在前端添加测试代码，打印process.env.REACT_APP_AUTHORITY的值，确认其不为undefined且格式正确。
2. 清理浏览器缓存后重新访问，避免旧缓存干扰。
3. 同步@azure/msal-react和@azure/msal-browser的版本至最新稳定版，旧版本可能存在Authority处理的已知bug。

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