Spraw, aby Axios automatycznie wysyłał pliki cookie w swoich żądaniach.

Question

Wysyłam żądania od klienta do mojego serwera Express.js za pomocą Axios.

Ustawiam plik cookie na kliencie i chcę go odczytać ze wszystkich żądań Axios bez ręcznego dodawania ich ręcznie.

To moja prośba przykładem stronie klienta:

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

Próbowałem dostęp nagłówków lub ciasteczka za pomocą tych właściwości w moim serwerze Express.js:

req.headers 
req.cookies 

Żaden z nich nie zawierała żadnych ciasteczek. Korzystam z oprogramowania pośredniego do obsługi parserów plików cookie:

app.use(cookieParser()) 

Jak ustawić automatyczne wysyłanie plików cookie przez aplikację Axios?

Edit:

ustawić ciasteczko na kliencie tak:

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

Chociaż to również za pomocą Axios, to nie ma znaczenia dla kwestii. Po prostu chcę umieścić pliki cookie we wszystkich moich żądaniach po ustawieniu pliku cookie.

Answer 1

Miałem ten sam problem i naprawiłem go przez właściwość withCredential.

XMLHttpRequest z innej domeny nie może ustawić wartości plików cookie dla ich własnej domeny, chyba że przy ustawieniuKredentials ustawiono wartość true przed wysłaniem żądania.

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

Answer 2

Dostajesz mieszane dwie myśli.

Trzeba "reagują Cookie" i "Axios"

reagować-cookies => jest do obsługi cookie po stronie klienta

Axios => jest do wysyłania ajax żądania do serwera

Dzięki tym informacjom, jeśli chcesz, aby pliki cookie ze strony klienta były przekazywane również po stronie zaplecza, musisz połączyć je ze sobą.

Uwaga z "reagować-Cookie" Readme:

izomorficzna ciasteczka!

Aby móc uzyskać dostęp do plików cookie użytkownika podczas renderowania serwera, użytkownik może używać plugToRequest lub setRawCookie.

link to readme

Jeśli to jest to, czego potrzebujesz, to świetnie.

Jeśli nie, proszę skomentuj, abym mógł rozwinąć więcej.

Answer 3

nie jestem zaznajomiony z Axios, ale o ile wiem, w javascript i ajax istnieje opcja

withCredentials: true 

To automatycznie wysłać plik cookie na stronie klienta. Jako przykład, scenariusz ten jest również generowane z passportjs, który ustawia plik cookie na serwerze

Answer 4

Innym rozwiązaniem jest użycie tej biblioteki:

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

który integruje „Tough Cookie” wsparcia w celu Axios . Należy zauważyć, że takie podejście nadal wymaga flagi withCredentials.

Answer 5

Ważne jest również ustawienie niezbędnych nagłówków w odpowiedzi ekspresowej. To są te, które zadziałały:

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