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

Question

J'envoie des requêtes du client à mon serveur Express.js en utilisant Axios.

J'ai défini un cookie sur le client et je veux lire ce cookie à partir de toutes les demandes Axios sans avoir à les ajouter manuellement à la demande.

Voici l'exemple de ma demande côté 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 dans mon serveur Express.js :

req.headers
req.cookies

Aucun d'entre eux ne contenait de cookies. J'utilise un intergiciel d'analyse des cookies :

app.use(cookieParser())

Comment puis-je faire en sorte qu'Axios envoie automatiquement des cookies dans les requêtes ?

Edit :

Je configure le 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, ce n'est pas pertinent pour la question. Je veux simplement intégrer les cookies dans toutes mes requêtes une fois qu'un cookie est défini.

Answer 1

J'ai eu le même problème et je l'ai résolu en utilisant l'option withCredentials propriété.

XMLHttpRequest provenant d'un domaine différent ne peut pas définir les valeurs de cookie pour son propre domaine, à moins que withCredentials ne soit défini à true avant d'effectuer la requête.

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

Answer 2

TL;DR :

{ withCredentials: true } o axios.defaults.withCredentials = true

---

Extrait de la documentation axios

withCredentials: false, // default

withCredentials indique si les demandes de contrôle d'accès intersites doivent ou non être effectuées à l'aide d'informations d'identification.

Si vous passez { withCredentials: true } avec votre demande, cela devrait fonctionner.

Un meilleur moyen serait de mettre withCredentials comme true sur axios.defaults

axios.defaults.withCredentials = true

Answer 3

Il est également important de définir les en-têtes nécessaires dans la réponse express. Voici 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();
});

Answer 4

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

withCredentials: true

Cela permettra d'envoyer automatiquement le cookie au côté client. A titre d'exemple, ce scénario est également généré avec passportjs, qui place un cookie sur le serveur

Answer 5

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'utilisation de l'option withCredentials drapeau.