Impossible d'utiliser Laravel Sanctum sur le frontend pour générer un cookie CSRF

Question

Récemment, j'ai essayé d'utiliser Laravel Sanctum pour l'authentification dans Nuxt 3, mais j'ai rencontré des problèmes lors de la prise de contact initiale du cookie CSRF. Le problème est qu'après avoir fait une demande au chemin http://localhost:8000/sanctum/csrf-cookie, le cookie XSRF-TOKEN n'est pas défini par le navigateur. Je suis bloqué sur ce problème depuis une semaine maintenant et je n'ai pas trouvé de solution sur Internet. J'ai essayé d'utiliser Axios et Fetch API pour définir le XSRF-TOKEN sans succès. J'utilise http://localhost:8000 sur le backend et http://localhost:3000 Laravel Sanctum lui-même fonctionne bien, car lors des tests sur Postman, je reçois l'en-tête set-cookie mais pas le navigateur. J'ai défini les propriétés suivantes dans le fichier .env

FRONTEND_URL=http://localhost:3000
    SESSION_DOMAIN=hôte local : 3000
    SESSION_DRIVER=cookie

J'ai tout mis en œuvre pour surmonter les limitations des requêtes CORS sur le front-end. Ma fonction de récupération ressemble à ceci :

window.fetch('http://localhost:8000/sanctum/csrf-cookie', {
        informations d'identification : 'inclure',
      }).then((réponse) => {
        console.log(…response.headers)
      })
J'ai lu que définir les informations d'identification sur « inclure » peut résoudre le problème, mais même avec cela, je ne parviens toujours pas à définir le XSRF-TOKEN. J'ai essayé de définir les informations d'identification sur « même origine », mais cela n'a pas fonctionné non plus. Est-ce que quelqu'un sait comment résoudre ce problème? 
            

Answer 1

Le problème est que le navigateur n'accepte pas les cookies provenant de différents ports.

Étant donné que votre backend fonctionne sur le port 8000 et que le frontend fonctionne sur le port 3000, les cookies fournis par le backend ne seront pas définis sur le frontend.

Une solution de contournement consiste donc à désactiver la protection CSRF uniquement pour les points de terminaison de l'API. Vous pouvez le faire dans VerifyCsrfTokenmiddleware.

Ajoutez cette ligne à votre $exceptarray et vous êtes prêt à partir.