axios 无法在前端使用Laravel Sanctum设置CSRF cookie

fykwrbwg  于 2023-03-29  发布在  iOS
关注(0)|答案(1)|浏览(168)

我最近尝试用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)
      })

我读到过将凭据设置为“include”可以解决这个问题,但即使这样做,我也无法设置XSRF-TOKEN。我试图将凭据设置为“same-origin”,但这也不起作用。有人知道如何解决这个问题吗?

xoefb8l8

xoefb8l81#

问题是浏览器不接受来自不同端口的Cookie。
由于您的后端运行在8000上,前端运行在3000上,因此后端提供的cookie不会在前端设置。
所以一个解决方案是只禁用API端点的CSRF保护。你可以在你的VerifyCsrfToken中间件中做到这一点。
将这一行添加到$except数组中,就可以开始了。
“/API/*”

相关问题