Faire en sorte qu’Axios envoie automatiquement des cookies dans ses requêtes

J’envoie des demandes du client à mon serveur Express.js en utilisant Axios.

Je mets un cookie sur le client et je veux lire ce cookie de toutes les demandes Axios sans les append manuellement pour demander à la main.

Voici l’exemple de ma demande client:

axios.get(`some api url`).then(response => ... 

J’ai essayé d’accéder aux en-têtes ou aux cookies en utilisant ces propriétés sur mon serveur Express.js:

 req.headers req.cookies 

Aucun d’eux ne contenait de cookies. J’utilise un middleware d’parsingur de cookies:

 app.use(cookieParser()) 

Comment puis-je envoyer des cookies à Axios dans les demandes automatiquement?

Modifier:

Je mets un cookie sur le client comme ceci:

 import cookieClient from 'react-cookie' ... let cookie = cookieClient.load('cookie-name') if(cookie === undefined){ axios.get('path/to/my/cookie/api').then(response => { if(response.status == 200){ cookieClient.save('cookie-name', response.data, {path:'/'}) } }) } ... 

Bien qu’il utilise également Axios, cela ne concerne pas la question. Je veux simplement intégrer des cookies dans toutes mes demandes une fois qu’un cookie est défini.

J’ai eu le même problème et corrigé par la propriété withCredential .

XMLHttpRequest d’un autre domaine ne peut pas définir de valeurs de cookie pour son propre domaine, sauf si withCredentials est défini sur true avant d’effectuer la demande.

 axios.get('some api url', {withCredentials: true}); 

Je ne suis pas familier avec Axios, mais pour autant que je sache en javascript et ajax il y a une option

 withCredentials: true 

Cela enverra automatiquement le cookie au client. Par exemple, ce scénario est également généré avec passportjs, qui définit un cookie sur le serveur.

Vous obtenez les deux pensées mélangées.

Vous avez “cookie de réaction” et “axios”

react-cookie => permet de manipuler le cookie côté client

axios => permet d’envoyer des requêtes ajax au serveur

Avec cette information, si vous souhaitez que les cookies du côté client soient également communiqués du côté backend, vous devrez les connecter ensemble.

Note du fichier “Lisez-moi”:

Cookies isomorphes!

Pour pouvoir accéder aux cookies utilisateur lors du rendu sur serveur, vous pouvez utiliser plugToRequest ou setRawCookie.

lien vers readme

Si c’est ce dont vous avez besoin, génial.

Si non, veuillez commenter pour que je puisse en dire plus.

Il est également important de définir les en-têtes nécessaires dans la réponse expresse. Ce sont ceux qui ont fonctionné pour moi:

 app.use(function(req, res, next) { res.header('Access-Control-Allow-Origin', yourExactHostname); res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); 

Une autre solution consiste à utiliser cette bibliothèque:

https://github.com/3846masa/axios-cookiejar-support

qui intègre le support “Tough Cookie” dans Axios. Notez que cette approche nécessite toujours l’indicateur withCredentials .