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.
Antworten:
Ich hatte das gleiche Problem und habe es mithilfe der
withCredentials
Eigenschaft 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.
quelle
Access-Control-Allow-Origin
Header der Antwort nicht auf Platzhalter (*) gesetzt istAccess-Control-Allow-Origin
es nicht eingestellt ist,*
bedeutet dies, dass ich wegen CORS-Recht keine Anfrage an diesen Server stellen werdeAccess-Control-Allow-Origin
Wert von set für die Domäne festlegen , von der aus Sie eine XHR-Anforderung stellen möchten. zBhttps://a.com
ist der Server,https://b.com
ist der Client undhttps://b.com
wird in den Browser einer anderen Person geladen und verwendetXMLHTTPRequest
, um eine Anfrage an zu stellenhttps://a.com
. Zusätzlich zum EinstellenXMLHTTPRequest
(initiiert inhttps://a.com
)withCredential: true
muss der Server -https://b.com
auch so konfiguriert werden, dass der Antwortheader enthältAccess-Control-Allow-Origin: https://a.com
TL; DR:
{ withCredentials: true }
oderaxios.defaults.withCredentials = true
Aus der Axios-Dokumentation
withCredentials
Gibt an, ob standortübergreifende Zugriffssteuerungsanforderungen mithilfe von Anmeldeinformationen gestellt werden sollenWenn Sie
{ withCredentials: true }
mit Ihrer Anfrage bestehen, sollte es funktionieren.Ein besserer Weg wäre das Einstellen
withCredentials
wietrue
inaxios.defaults
quelle
Ich bin mit Axios nicht vertraut, aber soweit ich in Javascript und Ajax weiß, gibt es eine Option
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
quelle
Es ist auch wichtig, die erforderlichen Header in der Express-Antwort festzulegen. Dies sind diejenigen, die für mich gearbeitet haben:
quelle
X-PINGOTHER
zuAccess-Control-Allow-Headers
war für mich obligatorisch (Node.js 6.9 mit Express 4.16, Chrome 63). Überprüfen Sie JakeElder 's Beitrag zu diesem GitHub-Problem: github.com/axios/axios/issues/191#issuecomment-311069164Eine 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
withCredentials
Flag erforderlich ist .quelle
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.quelle
{ withCredentials: true }
GET-Anfrage keine Auswirkungen hatte.withCredentials: true
zur Anforderungskonfiguration, aber nicht dieses Detail. Ich habe fast 2 Tage lang versucht, das Problem zu lösen, bis ich darauf stießeinstellen
axios.defaults.withCredentials = true;
oder für eine bestimmte Anfrage können Sie verwenden
axios.get(url,{withCredentials:true})
Zum Beispiel: Wenn Ihr Front-End, das die Anforderung stellt, auf localhost: 3000 ausgeführt wird, setzen Sie den Antwortheader auf
auch eingestellt
quelle
Sie können die
withCredentials
Eigenschaft verwenden, um Cookies in der Anfrage zu übergeben.Bei der Einstellung
{ withCredentials: true }
kann es zu Problemen mit dem Ursprung kommen. Um das zu lösen, müssen Sie verwendenHier können Sie über withCredentials lesen
quelle
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:
Link zur Readme
Wenn es das ist, was du brauchst, großartig.
Wenn nicht, kommentieren Sie bitte, damit ich mehr ausarbeiten kann.
quelle
plugToRequest
genau? Ich dachte, um auf Cookies auf dem Knotenserver zuzugreifen, braucht man nur diecookie-parser
Middleware (vorausgesetzt Express)?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:
Scheint, als sollten Sie immer zuerst den Schlüssel 'withCredentials' senden.
quelle