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

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

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

Oto przykład żądania od strony mojego klienta:

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

Próbowałem uzyskać dostęp do nagłówków lub plików cookie, korzystając z następujących właściwości na moim serwerze Express.js:

req.headers
req.cookies

Żaden z nich nie zawierał żadnych plików cookie. Używam oprogramowania pośredniczącego parsera plików cookie:

app.use(cookieParser())

Jak sprawić, by Axios automatycznie wysyłało pliki cookie w żądaniach?

Edytować:

Ustawiłem plik cookie na kliencie w ten sposób:

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ż używa również Axios, nie ma znaczenia dla pytania. Chcę po prostu osadzić pliki cookie we wszystkich moich żądaniach po ustawieniu pliku cookie.

Miałem ten sam problem i naprawiłem go, korzystając z withCredentialswłaściwości.

XMLHttpRequest z innej domeny nie może ustawić wartości plików cookie dla własnej domeny, chyba że właściwość withCredentials ma wartość true przed wykonaniem żądania.

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

TL; DR:

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

Z dokumentacji Axios

withCredentials: false, // default

withCredentials wskazuje, czy żądania kontroli dostępu między lokacjami powinny być wykonywane przy użyciu poświadczeń

Jeśli spełniasz { withCredentials: true }swoją prośbę, powinno działać.

Lepszym sposobem byłoby ustawienie withCredentialsjak truewaxios.defaults

axios.defaults.withCredentials = true

Nie jestem zaznajomiony z Axios, ale o ile wiem, w javascript i ajax jest opcja

withCredentials: true

Spowoduje to automatyczne wysłanie pliku cookie po stronie klienta. Na przykład ten scenariusz jest również generowany za pomocą paszportjs, które ustawiają plik cookie na serwerze

Ważne jest również ustawienie niezbędnych nagłówków w odpowiedzi ekspresowej. Oto te, które pracowały dla mnie:

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

Innym rozwiązaniem jest skorzystanie z tej biblioteki:

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

który integruje obsługę „Tough Cookie” w Axios. Zauważ, że to podejście nadal wymaga withCredentialsflagi.

dla ludzi, którzy nadal nie są w stanie go rozwiązać, ta odpowiedź mi pomogła. odpowiedź dotycząca przepełnienia stosu: 34558264

TLDR; należy ustawić {withCredentials: true}zarówno żądanie GET, jak i POST (pobieranie pliku cookie) zarówno dla axios, jak i dla pobierania.

Jak sprawić, by Axios automatycznie wysyłało pliki cookie w żądaniach?

zestaw axios.defaults.withCredentials = true;

lub dla jakiejś konkretnej prośby, której możesz użyć axios.get(url,{withCredentials:true})

spowoduje to błąd CORS, jeśli opcja „Access-Control-Allow-Origin” jest ustawiona na symbol wieloznaczny (*). Dlatego upewnij się, że podałeś adres URL, z którego pochodzi Twoje żądanie

na przykład: jeśli twój front-end, który sprawia, że ​​żądanie działa na localhost: 3000, ustaw nagłówek odpowiedzi jako

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

również zestaw

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

Możesz użyć withCredentialswłaściwości, aby przekazać pliki cookie w żądaniu.

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

Po ustawieniu { withCredentials: true }możesz napotkać problem z różnymi źródłami. Aby rozwiązać ten problem, musisz użyć

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

Tutaj możesz przeczytać o withCredentials

Pomieszasz te dwie myśli.

Masz „plik cookie reakcji” i „axios”

React-cookie => służy do obsługi pliku cookie po stronie klienta

axios => służy do wysyłania żądań ajax do serwera

Mając te informacje, jeśli chcesz, aby pliki cookie ze strony klienta były również przekazywane po stronie zaplecza, musisz je połączyć.

Uwaga z pliku Readme „React-cookie”:

Izomorficzne ciasteczka!

Aby mieć dostęp do plików cookie użytkownika podczas renderowania na serwerze, możesz użyć plugToRequest lub setRawCookie.

link do pliku readme

Jeśli tego potrzebujesz, świetnie.

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

Więc miałem dokładnie ten sam problem i straciłem około 6 godzin mojego życia na szukaniu, miałem

withCredentials: true

Ale przeglądarka nadal nie zapisała pliku cookie, dopóki z jakiegoś dziwnego powodu nie wpadłem na pomysł, aby przetasować ustawienia konfiguracji:

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

Wygląda na to, że zawsze powinieneś najpierw wysłać klucz „withCredentials”.