无法在前端使用Laravel Sanctum来生成CSRF cookie

Question

最近我尝试在Nuxt 3中使用Laravel Sanctum进行身份验证，但在初始的CSRF cookie握手过程中遇到了问题。问题是，在我向http://localhost:8000/sanctum/csrf-cookie路径发出请求后，浏览器没有设置XSRF-TOKEN cookie。我已经困在这个问题上已经一个星期了，在互联网上还没有找到解决方案。 我尝试使用Axios和Fetch API来设置XSRF-TOKEN，但没有成功。我在后端使用的是http://localhost:8000，前端使用的是http://localhost:3000。Laravel Sanctum本身工作正常，因为在Postman上测试时我收到了set-cookie头部，但浏览器没有收到。我在.env文件中设置了以下属性：

FRONTEND_URL=http://localhost:3000
    SESSION_DOMAIN=localhost:3000
    SESSION_DRIVER=cookie

我已经尽一切努力克服前端CORS请求的限制。我的fetch函数如下所示：

window.fetch('http://localhost:8000/sanctum/csrf-cookie', {
        credentials: 'include',
      }).then((response) => {
        console.log(…response.headers)
      })

我读到过将credentials设置为'include'可以解决问题，但即使这样做，我仍然无法设置XSRF-TOKEN。我尝试将credentials设置为'same-origin'，但也不起作用。有人知道如何解决这个问题吗？

Answer 1

问题是浏览器不会接受来自不同端口的cookie。

由于您的后端运行在8000端口，前端运行在3000端口，后端提供的cookie将无法设置在前端上。

因此，一个解决方法是仅为API端点禁用CSRF保护。 您可以在VerifyCsrfToken中间件中进行此操作。

将此行添加到您的$except数组中，然后您就可以继续了。