使用react-microsoft-login出现CORS错误，求排查与解决方法

首先明确：这个场景下的CORS错误和前端请求头无关——react-microsoft-login的登录流程是跳转至微软授权页面，而非前端发起AJAX请求，所以no-cors头完全不适用，问题根源在配置错误。

以下是具体排查和修复步骤：

• 修正tenantUrl参数
  你错误传入了完整的OAuth授权端点URL，但tenantUrl字段应该填租户ID、common（允许所有微软账户登录）、organizations（仅企业账户）这类值，库会自动拼接正确的授权地址。示例：

  // 正确写法：用租户ID
  const TENANT_URL = "your-tenant-id";
  // 或允许所有微软账户登录
  const TENANT_URL = "common";
  

  手动传入完整端点会导致请求地址错误，触发跨域问题。

• 严格匹配Redirect URI配置
  在Microsoft Entra ID的应用注册后台：

  • 确保代码中的REDIRECT_URL和配置的重定向URI完全一致（包括协议http/https、域名、路径，本地开发要填http://localhost:端口号）
  • 将该URI添加到Web平台的重定向列表中，不要选错平台（比如SPA）

• 检查应用类型与权限

  • 应用注册时选择Web应用类型，而非SPA（v2端点下Web应用支持标准授权码流程）
  • 添加必要的API权限（如User.Read），并确保权限已获得管理员同意（个人开发可直接在后台点击“授予管理员同意”）

• 修正后的示例代码

  import MicrosoftLogin from "react-microsoft-login";
  
  const CLIENT_ID = "你的应用客户端ID";
  const TENANT_URL = "common"; // 替换为你的租户ID或其他合法值
  const REDIRECT_URL = "https://你的域名.com"; // 和Entra后台配置完全一致
  
  export default (props: any) => {
    const authHandler = (err: any, data: any) => {
      console.log(err, data);
    };  
  
    return (
      <MicrosoftLogin
        clientId={CLIENT_ID}
        tenantUrl={TENANT_URL}
        redirectUri={REDIRECT_URL}
        authCallback={authHandler}
      />
    );  
  };
  

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