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.
Réponses:
J'ai eu le même problème et je l'ai résolu en utilisant la
withCredentials
proprié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.
la source
Access-Control-Allow-Origin
en-tête de réponse n'est pas défini sur un caractère générique (*)Access-Control-Allow-Origin
n'est pas défini,*
cela signifie que je ne ferai pas de demande à ce serveur à cause deAccess-Control-Allow-Origin
la valeur du domaine à partir duquel vous souhaitez effectuer une requête XHR. par exemple,https://a.com
est le serveur,https://b.com
est le client, ethttps://b.com
est chargé dans le navigateur de quelqu'un et utiliseXMLHTTPRequest
pour faire une demandehttps://a.com
. En plus deXMLHTTPRequest
(lancé danshttps://a.com
) à définirwithCredential: true
, le serveur -https://b.com
doit également être configuré pour que l'en-tête de réponse contienneAccess-Control-Allow-Origin: https://a.com
TL; DR:
{ withCredentials: true }
ouaxios.defaults.withCredentials = true
De la documentation axios
withCredentials
indique si les demandes de contrôle d'accès intersites doivent être effectuées à l'aide d'informations d'identificationSi vous passez
{ withCredentials: true }
avec votre demande, cela devrait fonctionner.Une meilleure façon serait de définir
withCredentials
commetrue
dansaxios.defaults
la source
Je ne suis pas familier avec Axios, mais pour autant que je sache en javascript et ajax, il existe une option
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
la source
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:
la source
X-PINGOTHER
enAccess-Control-Allow-Headers
est obligatoire pour moi (Node.js 6.9 avec 4,16 express, Chrome 63). Consultez la publication de JakeElder sur ce numéro de GitHub: github.com/axios/axios/issues/191#issuecomment-311069164Une 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'
withCredentials
indicateur.la source
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.la source
{ withCredentials: true }
requête GET n'avait aucun effet.withCredentials: true
à la configuration de la demande mais pas sur ce détail. J'ai passé près de 2 jours à essayer de résoudre le problème jusqu'à ce que je tombe sur çaensemble
axios.defaults.withCredentials = true;
ou pour une demande spécifique, vous pouvez utiliser
axios.get(url,{withCredentials:true})
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
également mis
la source
Vous pouvez utiliser la
withCredentials
propriété pour transmettre des cookies dans la demande.En définissant,
{ withCredentials: true }
vous pouvez rencontrer un problème d'origine croisée. Pour résoudre ce problème, vous devez utiliserIci vous pouvez en savoir plus sur withCredentials
la source
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":
lien vers readme
Si c'est ce dont vous avez besoin, tant mieux.
Sinon, veuillez commenter afin que je puisse élaborer davantage.
la source
plugToRequest
exactement? J'ai pensé pour accéder aux cookies sur le serveur de nœuds, tout ce dont on a besoin est lecookie-parser
middleware (en supposant Express)?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:
Il semble que vous devriez toujours envoyer la clé «withCredentials» en premier.
la source