Laravel Sanctum kann im Frontend nicht zum Generieren eines CSRF-Cookies verwendet werden

Question

Kürzlich habe ich versucht, Laravel Sanctum für die Authentifizierung in Nuxt 3 zu verwenden, bin aber beim ersten CSRF-Cookie-Handshake auf Probleme gestoßen. Das Problem ist, dass das XSRF-TOKEN-Cookie vom Browser nicht gesetzt wird, nachdem ich eine Anfrage an den Pfad http://localhost:8000/sanctum/csrf-cookie gestellt habe. Ich hänge nun schon seit einer Woche an diesem Problem fest und habe im Internet keine Lösung gefunden. Ich habe erfolglos versucht, mit Axios und der Fetch-API das XSRF-TOKEN festzulegen. Ich verwende http://localhost:8000 im Backend und http://localhost:3000 Laravel Sanctum selbst funktioniert einwandfrei, denn beim Testen auf Postman erhalte ich den Set-Cookie-Header, aber nicht den Browser. Ich habe die folgenden Eigenschaften in der Datei .env festgelegt:

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

Ich habe alle Anstrengungen unternommen, um die Einschränkungen von CORS-Anfragen im Frontend zu überwinden. Meine Abruffunktion sieht so aus:

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

Ich habe gelesen, dass das Setzen der Anmeldeinformationen auf „include“ das Problem lösen kann, aber selbst damit kann ich das XSRF-TOKEN immer noch nicht festlegen. Ich habe versucht, die Anmeldeinformationen auf „Same-Origin“ zu setzen, aber das hat auch nicht funktioniert. Weiß jemand, wie man dieses Problem löst?

Answer 1

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

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

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

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