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?
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
VerifyCsrfToken
middleware.Ajoutez cette ligne à votre
$except
array et vous êtes prêt à partir.