Laravel 10 + Vue 3 实现Discord OAuth登录遇CORS问题求助

问题根源 #

你用axios发起AJAX请求/auth/discord，但这个路由的响应是直接重定向到Discord的授权页面。axios会自动带上X-XSRF-TOKEN请求头，而Discord的OAuth接口的CORS规则不允许这个头，因此触发了跨域错误。

修复方案 #

不需要用axios请求，直接让浏览器跳转到/auth/discord路由即可，这样就不会产生AJAX跨域的问题：

修改Home.vue代码 #

<template>
  <button @click="loginWithDiscord">Login with Discord</button>
</template>

<script>
export default {
  methods: {
    loginWithDiscord() {
      // 直接跳转至Laravel的Discord授权路由
      window.location.href = '/auth/discord';
    }
  }
}
</script>

为什么Blade模板下没问题？ #

Blade是服务端渲染，点击按钮跳转路由是浏览器原生行为，不会发起AJAX请求，自然不会触发CORS限制。Vue作为单页应用，你之前误用axios请求重定向路由，才导致了跨域问题。

回调后的前端适配（可选） #

如果需要把回调获取的用户数据同步到Vue前端，可以修改回调路由，处理完登录逻辑后重定向回Vue页面并携带必要信息：

修改web.php的回调路由 #

Route::get('/auth/discord/callback', function () {
    $user = Socialite::driver('discord')->user();
    
    // 这里处理用户登录逻辑：比如创建/更新数据库用户、生成登录凭证（如JWT）
    // 示例：假设使用tymon/jwt-auth生成token
    $token = auth()->login($user);
    
    // 重定向回Vue首页，携带登录凭证
    return redirect()->to('/?token=' . $token);
});

之后在Vue页面中，可通过window.location.search解析URL参数，获取登录凭证并维护前端登录状态。

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