web-dev-qa-db-fra.com

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

J'envoie des demandes du client à mon serveur Express.js à l'aide d'Axios.

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

Voici mon exemple de 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'entre eux ne contenait de cookies. J'utilise un middleware d'analyse des cookies:

app.use(cookieParser())

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

Modifier:

Je mets 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, il n’est pas pertinent pour la question. Je souhaite simplement intégrer des cookies à toutes mes demandes une fois qu'un cookie est défini.

javascriptnode.jsexpresscookiesaxios
81
Kunok

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

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

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

Je ne connais pas Axios, mais pour autant que je sache en javascript et en ajax, il existe 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.

10
RITESH ARORA

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();
});
8
Eyk Rehbein

De la documentation axios

withCredentials: false, // défaut

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.

Une meilleure façon serait de définir withCredentials comme true dans axios.defaults

axios.defaults.withCredentials = true

5
Fatih

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 le drapeau withCredentials.

4
machineghost

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

Vous avez "react-cookie" et "axios"

react-cookie => sert à manipuler 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 en arrière-plan, vous devez les connecter ensemble.

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

Biscuits isomorphes!

Pour pouvoir accéder aux cookies des utilisateurs tout en effectuant un rendu sur serveur, vous pouvez utiliser plugToRequest ou setRawCookie.

lien vers le fichier readme

Si c'est ce dont vous avez besoin, c'est parfait.

Sinon, commentez pour que je puisse en dire plus.

1
Tzook Bar Noy

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

set axios.defaults.withCredentials = true;

ou pour certaines demandes spécifiques, vous pouvez utiliser axios.get(url,{withCredentials:true})

cela donnera une erreur CORS si votre 'Access-Control-Allow-Origin' est défini sur un caractère générique (*). Assurez-vous donc de spécifier l'URL d'origine de votre demande

par exemple, si votre serveur frontal qui effectue la requête s'exécute sur localhost: 3000, définissez l'en-tête de réponse sur

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

aussi mis

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

pour les personnes ne pouvant toujours pas le résoudre, cette réponse m'a aidé. stackoverflow answer: 34558264

TLDR; il faut définir {withCredentials: true} dans les deux requêtes GET, ainsi que la demande POST (obtenir le cookie) pour les deux axios ainsi que pour l'extraction.

0
the_dangoria