Azure B2C自定义策略下自动重定向登录时遇CORS错误

核心原因 #

你的SPA通过AJAX请求获取敏感用户信息时，后端尝试通过AJAX重定向到B2C登录页，但b2clogin.com不会为你的域名返回Access-Control-Allow-Origin头，导致浏览器触发CORS拦截。AJAX请求无法跨域跳转第三方授权页面，必须通过浏览器层面的重定向来处理。

分步解决方案 #

• 调整前端授权逻辑，优先检查登录状态
  不要让AJAX请求去处理未登录的情况，而是在页面加载或发起敏感请求前，先通过B2C SDK（如MSAL.js）主动检查用户登录状态：

  const msalInstance = new msal.PublicClientApplication({
      auth: {
          clientId: "c94c14cd-4efc-4c34-a70b-f88e9aa5877b",
          authority: "https://XXXXXXXXX.b2clogin.com/XXXXXXXXXX.onmicrosoft.com/B2C_1A_SIGNUP_SIGNIN",
          redirectUri: "https://XXXXXXXXX/XXX/XX/inici.html"
      }
  });
  
  // 页面加载时验证登录状态
  async function initAuth() {
      const activeAccount = msalInstance.getAllAccounts()[0];
      if (!activeAccount) {
          // 直接触发浏览器重定向到B2C登录，而非AJAX请求
          await msalInstance.loginRedirect({
              scopes: ["openid", "offline_access"],
              prompt: "login",
              uiLocales: "ca"
          });
      }
      // 已登录，正常发起接口请求
      loadUserInfo();
  }
  
  async function loadUserInfo() {
      try {
          const res = await fetch("/XXXXX/XXXXXX/XXXX/XXXXX/XXXXXXXX/jcr:content.user-info.json?eventId=a0da3b0e-90e2-4b8a-95ca-f50654ec9bd6&languageId=51d9383e-1039-ed11-9db1-00224899347c", {
              credentials: "include"
          });
          if (res.status === 401) {
              // 令牌过期或会话失效，重新登录
              await msalInstance.loginRedirect();
          }
          const userData = await res.json();
          // 处理用户信息
      } catch (err) {
          console.error("加载用户信息失败:", err);
      }
  }
  
  initAuth();
  

• 修改后端接口的未授权处理逻辑
  后端对敏感接口不要返回3xx重定向，而是返回401 Unauthorized状态码。前端捕获401后，再触发浏览器层面的登录重定向，避免AJAX跨域冲突。

• 验证B2C应用配置

  • 确认你的应用类型是单页应用（SPA），而非Web应用，SPA需要使用PKCE授权流程，重定向URI配置规则不同
  • 检查重定向URIhttps://XXXXXXXXX/XXX/XX/inici.html是否完全匹配（协议、域名、路径均不能有误）

• 避免直接通过AJAX请求B2C授权端点
  B2C的/authorize端点不支持跨域请求，任何尝试通过AJAX调用该端点的操作都会被浏览器拦截，必须通过浏览器地址栏跳转完成授权。

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