Lassen Sie Axios automatisch Cookies in seinen Anfragen senden

Ich sende mit Axios Anfragen vom Client an meinen Express.js-Server.

Ich habe auf dem Client ein Cookie gesetzt und möchte dieses Cookie aus allen Axios-Anforderungen lesen, ohne sie manuell zur manuellen Anforderung hinzuzufügen.

Dies ist das Beispiel für eine clientseitige Anfrage:

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

Ich habe versucht, mithilfe dieser Eigenschaften auf meinem Express.js-Server auf Header oder Cookies zuzugreifen:

req.headers
req.cookies

Keiner von ihnen enthielt Cookies. Ich verwende die Middleware für Cookie-Parser:

app.use(cookieParser())

Wie kann ich Axios dazu bringen, Cookies in Anfragen automatisch zu senden?

Bearbeiten:

Ich setze Cookies auf dem Client wie folgt:

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

Während es auch Axios verwendet, ist es für die Frage nicht relevant. Ich möchte einfach Cookies in alle meine Anfragen einbetten, sobald ein Cookie gesetzt ist.

Ich hatte das gleiche Problem und habe es mithilfe der withCredentialsEigenschaft behoben .

XMLHttpRequest aus einer anderen Domäne kann keine Cookie-Werte für die eigene Domäne festlegen, es sei denn, withCredentials wird vor der Anforderung auf true gesetzt.

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

TL; DR:

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

Aus der Axios-Dokumentation

withCredentials: false, // default

withCredentials Gibt an, ob standortübergreifende Zugriffssteuerungsanforderungen mithilfe von Anmeldeinformationen gestellt werden sollen

Wenn Sie { withCredentials: true }mit Ihrer Anfrage bestehen, sollte es funktionieren.

Ein besserer Weg wäre das Einstellen withCredentialswie trueinaxios.defaults

axios.defaults.withCredentials = true

Ich bin mit Axios nicht vertraut, aber soweit ich in Javascript und Ajax weiß, gibt es eine Option

withCredentials: true

Dadurch wird das Cookie automatisch an den Client gesendet. Dieses Szenario wird beispielsweise auch mit passportjs generiert, wodurch ein Cookie auf dem Server gesetzt wird

Es ist auch wichtig, die erforderlichen Header in der Express-Antwort festzulegen. Dies sind diejenigen, die für mich gearbeitet haben:

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

Eine andere Lösung besteht darin, diese Bibliothek zu verwenden:

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

Dies integriert die Unterstützung von "Tough Cookie" in Axios. Beachten Sie, dass für diesen Ansatz weiterhin das withCredentialsFlag erforderlich ist .

Für Leute, die es immer noch nicht lösen können, hat mir diese Antwort geholfen. Antwort auf Stapelüberlauf: 34558264

TLDR; Man muss {withCredentials: true}sowohl die GET-Anforderung als auch die POST-Anforderung (Abrufen des Cookies) sowohl für Axios als auch für Fetch festlegen.

Wie kann ich Axios dazu bringen, Cookies in Anfragen automatisch zu senden?

einstellen axios.defaults.withCredentials = true;

oder für eine bestimmte Anfrage können Sie verwenden axios.get(url,{withCredentials:true})

Dies führt zu einem CORS-Fehler, wenn Ihr 'Access-Control-Allow-Origin' auf Platzhalter (*) gesetzt ist. Stellen Sie daher sicher, dass Sie die URL des Ursprungs Ihrer Anfrage angeben

Zum Beispiel: Wenn Ihr Front-End, das die Anforderung stellt, auf localhost: 3000 ausgeführt wird, setzen Sie den Antwortheader auf

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

auch eingestellt

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

Sie können die withCredentialsEigenschaft verwenden, um Cookies in der Anfrage zu übergeben.

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

Bei der Einstellung { withCredentials: true }kann es zu Problemen mit dem Ursprung kommen. Um das zu lösen, müssen Sie verwenden

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

Hier können Sie über withCredentials lesen

Sie bekommen die beiden Gedanken gemischt.

Sie haben "React-Cookie" und "Axios"

React-Cookie => dient zur Behandlung des Cookies auf der Clientseite

axios => dient zum Senden von Ajax-Anfragen an den Server

Wenn Sie mit diesen Informationen möchten, dass die Cookies von der Client-Seite auch auf der Backend-Seite kommuniziert werden, müssen Sie sie miteinander verbinden.

Hinweis aus "React-Cookie" Readme:

Isomorphe Kekse!

Um beim Rendern von Servern auf Benutzer-Cookies zugreifen zu können, können Sie plugToRequest oder setRawCookie verwenden.

Link zur Readme

Wenn es das ist, was du brauchst, großartig.

Wenn nicht, kommentieren Sie bitte, damit ich mehr ausarbeiten kann.

Also hatte ich genau das gleiche Problem und verlor ungefähr 6 Stunden meines Lebens auf der Suche, ich hatte das

withCredentials: true

Aber der Browser hat den Cookie immer noch nicht gespeichert, bis ich aus irgendeinem seltsamen Grund auf die Idee kam, die Konfigurationseinstellung zu mischen:

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

Scheint, als sollten Sie immer zuerst den Schlüssel 'withCredentials' senden.