it-swarm.com.de

Lassen Sie Axios Cookies in ihren Anfragen automatisch senden

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

Ich habe ein Cookie auf dem Client gesetzt und möchte dieses Cookie von allen Axios-Anfragen lesen, ohne sie manuell zur Anfrage von Hand hinzuzufügen.

Dies ist ein Beispiel für eine Kundenanfrage:

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

Ich habe versucht, über die folgenden Eigenschaften in meinem Express.js-Server auf Header oder Cookies zuzugreifen:

req.headers
req.cookies

Keiner von ihnen enthielt Cookies. Ich verwende Cookie Parser Middleware:

app.use(cookieParser())

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

Bearbeiten:

Ich setze den Cookie 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:'/'})
        }
      })
    }
...

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

81
Kunok

Ich hatte das gleiche Problem und habe es durch withCredential behoben.

XMLHttpRequest aus einer anderen Domäne kann keine Cookie-Werte für ihre eigene Domäne festlegen, es sei denn, withCredentials ist auf true festgelegt, bevor die Anforderung gestellt wird.

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

Ich bin nicht mit Axios vertraut, aber meines Wissens nach gibt es in Javascript und Ajax eine Option

withCredentials: true

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

10
RITESH ARORA

Es ist auch wichtig, die erforderlichen Header in der Expressantwort festzulegen. Dies sind die, 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();
});
8
Eyk Rehbein

Aus der Axios-Dokumentation

withCredentials: false, // default

withCredentials gibt an, ob standortübergreifende Zugriffssteuerungsanforderungen mithilfe von Anmeldeinformationen erfolgen sollen

Wenn Sie { withCredentials: true } mit deiner Bitte sollte es funktionieren.

Ein besserer Weg wäre, withCredentials als true in axios.defaults

axios.defaults.withCredentials = true

5
Fatih

Eine andere Lösung ist die Verwendung dieser Bibliothek:

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

die "Tough Cookie" -Unterstützung in Axios integriert. Beachten Sie, dass für diesen Ansatz weiterhin das Flag withCredentials erforderlich ist.

4
machineghost

Sie bekommen die beiden Überlegungen gemischt.

Sie haben "React-Cookie" und "Axios"

react-cookie => dient zur Behandlung des Cookies auf der Client-Seite

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

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

Hinweis aus der Readme-Datei "react-cookie":

Isomorphe Kekse!

Um während des Renderns auf Benutzer-Cookies zugreifen zu können, können Sie plugToRequest oder setRawCookie verwenden.

Link zu Readme

Wenn Sie das brauchen, großartig.

Wenn nicht, bitte kommentieren, damit ich näher darauf eingehen kann.

1
Tzook Bar Noy

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

setze axios.defaults.withCredentials = true;

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

dies führt zu einem CORS-Fehler, wenn für 'Access-Control-Allow-Origin' der Platzhalter (*) festgelegt ist. Geben Sie daher unbedingt die Ursprungs-URL Ihrer Anfrage an

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

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

auch gesetzt

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

für Leute, die es immer noch nicht lösen können, hat mir diese Antwort geholfen. Stackoverflow-Antwort: 34558264

TLDR; man muss {withCredentials: true} sowohl in der GET-Anfrage als auch in der POST Anfrage, die das Cookie abruft) für beide Achsen als auch für Fetch setzen.

0
the_dangoria