Fai in modo che Axios invii automaticamente i cookie nelle sue richieste

Sto inviando richieste dal client al mio server Express.js utilizzando Axios.

Ho impostato un cookie sul client e voglio leggere quel cookie da tutte le richieste di Axios senza aggiungerli manualmente alla richiesta manuale.

Questo è il mio esempio di richiesta lato cliente:

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

Ho provato ad accedere alle intestazioni o ai cookie utilizzando queste proprietà nel mio server Express.js:

req.headers
req.cookies

Nessuno dei due conteneva cookie. Sto utilizzando il middleware del parser dei cookie:

app.use(cookieParser())

Come posso fare in modo che Axios invii automaticamente i cookie nelle richieste?

Modificare:

Ho impostato il cookie sul client in questo modo:

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

Sebbene utilizzi anche Axios, non è rilevante per la domanda. Voglio semplicemente incorporare i cookie in tutte le mie richieste una volta impostato un cookie.

Ho avuto lo stesso problema e l'ho risolto utilizzando la withCredentialsproprietà.

XMLHttpRequest da un dominio diverso non può impostare i valori dei cookie per il proprio dominio a meno che withCredentials non sia impostato su true prima di effettuare la richiesta.

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

TL; DR:

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

Dalla documentazione di Axios

withCredentials: false, // default

withCredentials indica se le richieste di controllo degli accessi tra siti devono essere effettuate utilizzando le credenziali

Se passi { withCredentials: true }con la tua richiesta dovrebbe funzionare.

Un modo migliore sarebbe impostare withCredentialscome trueinaxios.defaults

axios.defaults.withCredentials = true

Non ho familiarità con Axios, ma per quanto ne so in javascript e ajax c'è un'opzione

withCredentials: true

Questo invierà automaticamente il cookie al lato client. Ad esempio, questo scenario viene generato anche con passportjs, che imposta un cookie sul server

È anche importante impostare le intestazioni necessarie nella risposta rapida. Questi sono quelli che hanno funzionato per me:

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

Un'altra soluzione è usare questa libreria:

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

che integra il supporto "Tough Cookie" in Axios. Si noti che questo approccio richiede ancora la withCredentialsbandiera.

per le persone ancora non in grado di risolverlo, questa risposta mi ha aiutato. risposta stackoverflow: 34558264

TLDR; è necessario impostare {withCredentials: true}sia la richiesta GET che la richiesta POST (ottenere il cookie) sia per gli assi sia per il recupero.

Come posso fare in modo che Axios invii automaticamente i cookie nelle richieste?

impostato axios.defaults.withCredentials = true;

oppure per qualche specifica richiesta puoi utilizzare axios.get(url,{withCredentials:true})

questo darà l'errore CORS se il tuo "Access-Control-Allow-Origin" è impostato su carattere jolly (*). Assicurati quindi di specificare l'URL di origine della tua richiesta

ad esempio: se il tuo front-end che effettua la richiesta viene eseguito su localhost: 3000, imposta l'intestazione della risposta come

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

anche impostato

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

È possibile utilizzare la withCredentialsproprietà per passare i cookie nella richiesta.

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

IMPOSTANDO { withCredentials: true } potresti riscontrare problemi di origine incrociata. Per risolverlo devi usare

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

Qui puoi leggere informazioni su withCredentials

Stai mescolando i due pensieri.

Hai "react-cookie" e "axios"

react-cookie => serve per gestire il cookie sul lato client

axios => serve per inviare richieste ajax al server

Con queste informazioni, se desideri che i cookie dal lato client vengano comunicati anche dal lato backend, dovrai collegarli insieme.

Nota dal file Readme di "react-cookie":

Biscotti isomorfi!

Per poter accedere ai cookie dell'utente durante il rendering del server, è possibile utilizzare plugToRequest o setRawCookie.

collegamento a readme

Se questo è ciò di cui hai bisogno, bene.

In caso contrario, per favore commenta così potrei elaborare di più.

Quindi ho avuto lo stesso identico problema e ho perso circa 6 ore della mia vita a cercare, ho avuto il file

withCredentials: true

Ma il browser non ha ancora salvato il cookie fino a quando per qualche strano motivo ho avuto l'idea di mescolare le impostazioni di configurazione:

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

Sembra che dovresti sempre inviare prima la chiave "withCredentials".