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.

J'ai mis un cookie sur le client et je souhaite lire ce cookie à partir de toutes les demandes Axios sans les ajouter manuellement pour demander à la main.

Voici mon exemple de 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'eux ne contenait de cookies. J'utilise le middleware de l'analyseur de cookies:

app.use(cookieParser())

Comment faire en sorte qu'Axios envoie automatiquement des cookies dans les demandes?

Éditer:

J'ai mis 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 n'est pas pertinent pour la question. Je souhaite 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 je l'ai résolu en utilisant la withCredentialspropriété.

XMLHttpRequest d'un domaine différent ne peut pas définir de valeurs de cookie pour son propre domaine à moins que withCredentials ne soit défini sur true avant d'effectuer la demande.

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

TL; DR:

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

De la documentation axios

withCredentials: false, // default

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

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

Une meilleure façon serait de définir withCredentialscomme truedansaxios.defaults

axios.defaults.withCredentials = true

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

withCredentials: true

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

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

pour les gens encore incapables de le résoudre, cette réponse m'a aidé. réponse stackoverflow: 34558264

TLDR; il faut définir {withCredentials: true}à la fois la requête GET et la requête POST (obtenir le cookie) pour les deux axios ainsi que pour fetch.

Comment faire en sorte qu'Axios envoie automatiquement des cookies dans les demandes?

ensemble axios.defaults.withCredentials = true;

ou pour une demande spécifique, vous pouvez utiliser axios.get(url,{withCredentials:true})

cela donnera une erreur CORS si votre 'Access-Control-Allow-Origin' est défini sur wildcard (*). Assurez-vous donc de bien préciser l'url d'origine de votre demande

par exemple: si votre front-end qui fait la demande s'exécute sur localhost: 3000, définissez l'en-tête de réponse comme

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

également mis

res.setHeader('Access-Control-Allow-Credentials',true);

Vous pouvez utiliser la withCredentialspropriété pour transmettre des cookies dans la demande.

axios.get(`api_url`, { withCredentials: true })

En définissant, { withCredentials: true }vous pouvez rencontrer un problème d'origine croisée. Pour résoudre ce problème, vous devez utiliser

expressApp.use(cors({ credentials: true, origin: "http://localhost:8080" }));

Ici vous pouvez en savoir plus sur withCredentials

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

Vous avez "react-cookie" et "axios"

react-cookie => sert à gérer le cookie côté client

axios => sert à envoyer des requêtes ajax au serveur

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

Remarque du fichier Lisez-moi de "react-cookie":

Biscuits isomorphes!

Pour pouvoir accéder aux cookies utilisateur tout en effectuant le rendu du serveur, vous pouvez utiliser plugToRequest ou setRawCookie.

lien vers readme

Si c'est ce dont vous avez besoin, tant mieux.

Sinon, veuillez commenter afin que je puisse élaborer davantage.

J'ai donc eu exactement le même problème et j'ai perdu environ 6 heures de ma vie à chercher, j'avais le

withCredentials: true

Mais le navigateur n'a toujours pas enregistré le cookie jusqu'à ce que, pour une raison étrange, j'ai eu l'idée de mélanger le paramètre de configuration:

Axios.post(GlobalVariables.API_URL + 'api/login', {
        email,
        password,
        honeyPot
    }, {
        withCredentials: true,
        headers: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json'
    }});

Il semble que vous devriez toujours envoyer la clé «withCredentials» en premier.