Laravel+React集成Microsoft Graph API认证遇CORS错误求助

问题原因 #

你当前的实现逻辑是用axios发起AJAX请求到Laravel的/login接口，后端返回302重定向到Azure AD的登录页。但浏览器会把这个重定向后的请求当成AJAX跨域请求，而Azure AD的服务器不会为前端域名（http://localhost:3000）配置CORS允许规则，这是OAuth2授权流程的安全设计，直接导致了CORS错误。

正确解决方案 #

你尝试的「后端返回authUrl，前端用window.location.replace跳转」是完全合理且符合OAuth2规范的做法，具体步骤如下：

1. 修改Laravel的signin方法
   不要直接返回重定向响应，而是将生成的授权URL以JSON格式返回：

   public function signin()
   {
       // 生成授权URL的逻辑保持不变
       $authUrl = $this->provider->getAuthorizationUrl();
       session(['oauth2state' => $this->provider->getState()]);
   
       // 返回JSON格式的授权URL
       return response()->json(['auth_url' => $authUrl]);
   }
   

2. 调整前端登录逻辑
   点击登录按钮后，先请求Laravel接口拿到授权URL，再触发浏览器跳转：

   // 登录按钮的onClick事件处理
   const handleLogin = async () => {
       try {
           const response = await axios.get('/api/login');
           // 跳转到Azure AD登录页
           window.location.href = response.data.auth_url;
       } catch (error) {
           console.error('获取授权地址失败:', error);
       }
   };
   

3. 修正Laravel的CORS配置
   你的cors.php里有多余的配置项，删除'Access-Control-Allow-Origin' => ['*', '/*']，正确配置如下：

   'paths' => ['api/*', 'sanctum/csrf-cookie'],
   'allowed_methods' => ['*'],
   'allowed_origins' => ['*'],
   'allowed_origins_patterns' => [],
   'allowed_headers' => ['*'],
   'exposed_headers' => [],
   'max_age' => 0,
   'supports_credentials' => true,
   

   （注：如果生产环境需要限制域名，把allowed_origins改成具体的前端域名数组即可）

为什么这个方案有效？ #

直接通过window.location.href跳转是浏览器的顶级导航请求，不属于AJAX跨域范畴，不会触发CORS检查。Azure AD的登录页本身就是允许外部域名跳转访问的，符合OAuth2授权码流程的标准交互方式。

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