無法在前端使用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陣列中，然後您就可以繼續了。