Faire Axios envoyer des "cookies" dans ses demandes automatiquement

Je suis d'envoyer des demandes de la part du client à mon Express.js serveur à l'aide de Axios.

J'ai installer un cookie sur le client et je veux lire que les cookies de tous les Axios demandes sans les ajouter manuellement à la demande de la main.

C'est mon côté client demande exemple:

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

J'ai essayé d'accéder à des en-têtes ou les cookies à l'aide de ces propriétés dans mon Express.js serveur:

req.headers
req.cookies

Aucun d'entre eux contiennent des cookies. Je suis à l'aide de cookie analyseur middleware:

app.use(cookieParser())

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

Edit:

J'ai mis 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:'/'})
        }
      })
    }
...

Alors qu'il est aussi à l'aide d'Axios, il n'est pas pertinent pour la question. Je veux simplement intégrer les cookies dans toutes mes demandes une fois qu'un cookie est créé.

  • comment avez-vous mis le cookie sur le client? montrer l'exemple de code s'il vous plaît 🙂
  • Ajouté le code en question
  • Les Cookies sont définis par les serveurs avec un Set-Cookie non par le client, je suppose que tu veux dire lire le cookie sur le client. Selon le Témoin protocole, le client doit inclure un en-tête de Cookie dans sa demande à l'émetteur d'un cookie serveur.
  • Regarde ce stackoverflow.com/questions/53898031/...
InformationsquelleAutor Kunok | 2017-03-24
  1. 157

    J'ai eu le même problème et il fixe par withCredential propriété.

    XMLHttpRequest partir d'un domaine différent ne peut pas définir les valeurs des cookies pour leur propre domaine, à moins que withCredentials est défini à true, avant de faire la demande.

    axios.get('some api url', {withCredentials: true});
    • Si vous essayez de vous connecter à un Express application, vous aurez besoin d'utiliser de la scro, et l'utilisation de ces paramètres. L'origine de la demande est nécessaire. app.utilisation(scro({informations d'identification: c'est vrai, origine: 'localhost:8080'}));
    • notez que cela ne fonctionne que lorsque le Access-Control-Allow-Origin en-tête de réponse n'est pas le caractère générique (*)
    • Que voulez-vous dire? Je suis confronté au même problème, si Access-Control-Allow-Origin n'est pas le * cela signifie, je ne vais pas faire de demande à ce serveur à cause de la SCRO droit
    • La réponse doit définir Access-Control-Allow-Origin's de la valeur pour le nom de domaine que vous voulez faire XHR demande de. par exemple, https://a.com est le serveur, https://b.com est le client, et https://b.com est chargé dans un navigateur et est à l'aide de XMLHTTPRequest à faire une demande pour https://a.com. En outre, pour la XMLHTTPRequest (lancé en https://a.com) pour définir withCredential: true, le serveur https://b.com doit également être configuré de sorte que la réaction de l'en-tête contient Access-Control-Allow-Origin: https://a.com
    • J'ai un petit problème avec cette... si j'ai un serveur b en tant que client (ie. réagir page), que si j'ai mis ceci à true, il va envoyer la vérification des pouvoirs, pas le b diplômes... LOL... OK, c'est pas drôle.
    • Avez-vous de la commande de mal? https://b.com dans votre exemple, représente le client, donc XMLHTTPRequest devrait être lancé en b au lieu de a ?

    InformationsquelleAutor fingerpich
  2. 10

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

    withCredentials: true

    Cela va automatiquement envoyer le cookie pour le côté client. Comme un exemple, ce scénario est également généré avec passportjs, qui définit un cookie sur le serveur

    InformationsquelleAutor RITESH ARORA
  3. 7

    Il est également important de les en-têtes de la réponse expresse. Ce sont ceux qui ont travaillé 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();
});
    InformationsquelleAutor Eyk Rehbein
  4. 5

    De l'axios documentation

    withCredentials: false, //par défaut

    withCredentials indique si oui ou non le cross-site de Contrôle d'Accès les demandes doivent être faites à l'aide des informations d'identification

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

    Une meilleure façon serait de réglage withCredentials comme true dans axios.defaults

    axios.les valeurs par défaut.withCredentials = true

    • L'envoi des informations d'identification avec tous demande est une mauvaise pratique. Ces contrôles sont en place pour une raison. Qui parle à un autre service, l'envoi de tous vos cookies, qu'ils soient utilisés ne le sont pas, est venu pour l'exploitation.
    InformationsquelleAutor Fatih
  5. 4

    Une autre solution est d'utiliser cette bibliothèque:

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

    qui intègre "Tough Cookie" soutien à Axios. Notez que cette approche exige toujours le withCredentials drapeau.

    InformationsquelleAutor machineghost
  6. 1

    Vous êtes l'obtention des deux pense mixte.

    Vous avez "réagissent-cookie" et "axios"

    réagir-cookie => est pour la manutention, le cookie sur le côté client

    axios => est pour l'envoi d'une requête ajax vers le serveur

    Avec cette info, si vous voulez les cookies du côté client pour être communiquées dans le backend côté, vous aurez besoin de les connecter entre eux.

    Note de "réagir-cookie" Readme:

    Isomorphe cookies!

    Pour être en mesure d'accéder les cookies de l'utilisateur tout en faisant le serveur de rendu, vous
    pouvez utiliser plugToRequest ou setRawCookie.

    lien vers readme

    Si c'est ce que vous avez besoin, grande.

    Si non, s'il vous plaît commentaire afin que je puisse donner plus de détails.

    • Ce n' plugToRequest exactement faire? J'ai pensé à accéder à des cookies sur le nœud de serveur, tout ce qu'on besoins est la cookie-parser middleware (en supposant Express)?
    InformationsquelleAutor Tzook Bar Noy
  7. 0

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

    ensemble axios.defaults.withCredentials = true;

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

    cela donnera de la SCRO d'erreur si votre "Access-Control-Allow-Origin" est destinée à
    caractère générique(*).
    Par conséquent, assurez-vous de spécifier l'url d'origine de votre demande

    pour ex: si votre front-end, ce qui rend la demande s'exécute sur localhost:3000 , puis définissez l'en-tête de réponse que

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

    également définir 

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

    pour les personnes toujours pas en mesure de le résoudre, cette réponse m'a aidé.
    stackoverflow réponse: 34558264

    TLDR;
    on a besoin de définir {withCredentials: true} dans les deux demande d'OBTENIR ainsi la requête POST (récupérer le cookie) pour les deux axios et les récupérer.

    InformationsquelleAutor the_dangoria