如何解决MERN应用MSAL认证时的Access-Control-Allow-Origin报错

当前代码的认证流程逻辑存在本质偏差，和你Node端的CORS配置无关：

• 前端通过axios发送异步XMLHttpRequest请求，访问后端/api/auth/signin接口
• 后端接口逻辑是生成微软登录授权URL后，直接返回302重定向响应
• 浏览器处理跨域异步请求时，会自动跟随302重定向，尝试请求login.microsoftonline.com下的微软登录地址
• 微软的登录服务器不会为你的客户端域名配置Access-Control-Allow-Origin响应头，因此触发CORS拦截报错

注意：你修改Node端的CORS配置完全无法解决这个问题，因为触发报错的请求目标域名属于微软服务，你的Node服务返回的CORS响应头对微软服务器的响应没有任何约束力，微软认证接口天生不会为任意第三方源开放跨域访问权限。

1. 调整前端触发认证的逻辑 #

不要用axios这类异步XHR请求触发认证跳转，这类请求天生受CORS策略限制。将按钮点击逻辑改为浏览器全页面导航跳转，跳转过程不受CORS规则约束：
修改后的React组件代码：

import React from 'react';

const App = () => {
    const handleConnect = () => {
        // 直接通过页面导航触发后端接口访问，替代之前的axios异步请求
        window.location.href = `${process.env.SERVER_URL}/api/auth/signin`;
    };

    return (
        <button onClick={handleConnect}>Connect</button>
    );
};

export default App;

全页面导航的场景下，后端返回的302重定向到微软登录页的过程属于浏览器的顶层跳转行为，不会触发CORS校验。

2. 修正Azure AD的重定向URI配置 #

当前的配置存在类型错配和路径偏差：

• 移除配置为SPA类型的<CLIENT_URL>重定向地址：你的应用是基于@azure/msal-node的机密Web应用，认证回调全链路落在Node后端，不需要为SPA类型配置重定向地址
• 将Web类型的重定向地址修正为和代码中OAUTH_REDIRECT_URI环境变量完全一致的回调路径，即<SERVER_URL>/api/auth/callback（也就是你auth控制器中定义的callback接口路径），不要错把/api/auth/signin配成回调地址——signin接口是生成授权URL的入口，不是授权完成后跳转回来的回调接收地址

3. 补全Session中间件的跨域配置 #

当前session配置没有适配跨域站点、第三方跳转回来的场景，会导致认证完成后cookie无法正常写入：
修改后的session中间件配置：

app.use(session({
    secret: 'your_secret_value_here',
    resave: false,
    saveUninitialized: false,
    unset: 'destroy',
    // 新增跨域适配的cookie配置
    cookie: {
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production', // 生产环境要求HTTPS
        sameSite: 'lax', // 支持从微软站点跳转回应用时携带cookie
        maxAge: 24 * 60 * 60 * 1000
    }
}));

4. 修复后端控制器的潜在运行时错误 #

当前callback方法中直接调用了graph.getUserDetails方法，但代码中未引入和初始化graph请求模块，完成上述CORS相关修复后需要提前补全该模块的引入逻辑，避免触发运行时错误。

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