Node.js与React应用中Microsoft OAuth2授权请求的CORS阻塞解决

你遇到的CORS错误，核心原因是前端用AJAX（XMLHttpRequest/fetch）调用后端的登录接口，后端返回重定向到Azure的登录页时，浏览器会尝试通过AJAX请求跟随这个重定向，但目标域名login.microsoftonline.com没有配置允许localhost:3000的CORS头，因此被浏览器拦截。

而你的纯NodeJS应用能正常运行，是因为它是浏览器直接访问后端登录接口（顶层导航），浏览器处理这类重定向时不受同源策略限制，不会触发CORS检查。

1. 修改前端登录按钮的触发逻辑 #

不要用AJAX调用后端登录接口，改为直接让浏览器跳转到后端的登录接口：

// React组件中的登录按钮点击处理函数
const handleAzureLogin = () => {
  window.location.href = '/api/auth/sso-login';
};

或者直接用a标签：

<a href="/api/auth/sso-login" className="login-btn">Azure登录</a>

2. 调整后端回调URI配置 #

确保REDIRECT_URI指向后端的回调接口（而非前端地址），比如http://localhost:3000/api/auth/callback。然后在后端实现回调接口，完成授权码兑换token、创建用户会话后，再重定向回前端页面：

// 后端回调接口示例（类似你的纯Node应用逻辑）
app.get('/api/auth/callback', async (req, res) => {
  const { code } = req.query;
  if (!code) return res.status(400).send('授权码缺失');

  try {
    // 兑换access token
    const tokenResponse = await axios.post(tokenUrl, new URLSearchParams({
      client_id: CLIENT_ID,
      scope: 'https://graph.microsoft.com/.default',
      code,
      redirect_uri: REDIRECT_URI, // 这里要和Azure门户配置的回调URI一致
      grant_type: 'authorization_code',
      client_secret: CLIENT_SECRET
    }));

    // 这里可以将token存入session或生成JWT
    req.session.accessToken = tokenResponse.data.access_token;

    // 重定向回前端首页或用户页面
    res.redirect('/dashboard');
  } catch (err) {
    res.status(500).send(`兑换授权码失败: ${err.message}`);
  }
});

3. 确认Azure门户配置 #

在Azure AD应用注册中，确保：

• 已将后端的回调URI（http://localhost:3000/api/auth/callback）添加到"身份验证"->"重定向URI"列表
• 应用权限已配置正确（包含你需要的Graph API权限）

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