Axios'un isteklerinde otomatik olarak çerez göndermesini sağlayın

Axios kullanarak istemciden Express.js sunucuma istek gönderiyorum.

İstemciye bir çerez koyuyorum ve bu çerezi tüm Axios isteklerinden, elle talep etmek için manuel olarak eklemeden okumak istiyorum.

Bu benim müşteri tarafındaki istek örneğim:

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

Express.js sunucumdaki şu özellikleri kullanarak başlıklara veya çerezlere erişmeye çalıştım:

req.headers
req.cookies

Hiçbiri çerez içermiyordu. Çerez ayrıştırıcı ara yazılım kullanıyorum:

app.use(cookieParser())

Axios'un isteklerde otomatik olarak çerez göndermesini nasıl sağlayabilirim?

Düzenle:

İstemciye şu şekilde çerez koyuyorum:

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

Axios'u da kullanıyor olsa da, soruyla alakalı değil. Bir tanımlama bilgisi ayarlandıktan sonra tüm isteklerime tanımlama bilgileri yerleştirmek istiyorum.

Aynı sorunu yaşadım ve withCredentialsözelliği kullanarak düzelttim .

Farklı bir etki alanından XMLHttpRequest, istekte bulunmadan önce withCredentials öğesi true olarak ayarlanmadıkça kendi etki alanı için tanımlama bilgisi değerlerini ayarlayamaz.

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

TL; DR:

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

Axios belgelerinden

withCredentials: false, // default

withCredentials Siteler arası Erişim Kontrolü isteklerinin kimlik bilgileri kullanılarak yapılması gerekip gerekmediğini gösterir

{ withCredentials: true }İsteğiniz ile geçerseniz çalışmalıdır.

Daha iyi bir yol ayarlama olacağını withCredentialsolarak trueiçindeaxios.defaults

axios.defaults.withCredentials = true

Axios'a aşina değilim, ancak javascript ve ajax'ta bildiğim kadarıyla bir seçenek var

withCredentials: true

Bu, çerezi otomatik olarak müşteri tarafına gönderecektir. Örnek olarak, bu senaryo, sunucuya bir çerez yerleştiren passportjs ile de oluşturulmuştur.

Hızlı yanıtta gerekli başlıkları ayarlamak da önemlidir. Bunlar benim için işe yarayanlar:

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

Başka bir çözüm de bu kitaplığı kullanmaktır:

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

Axios'a "Tough Cookie" desteğini entegre eden. Bu yaklaşımın hala withCredentialsbayrak gerektirdiğini unutmayın .

Hala çözemeyen insanlar için bu cevap bana yardımcı oldu. stackoverflow yanıt: 34558264

TLDR; sete bir ihtiyacı {withCredentials: true}hem GET isteğinde yanı sıra getirme hem AXIOS için POST isteği (çerez alma).

Axios'un isteklerde otomatik olarak çerez göndermesini nasıl sağlayabilirim?

Ayarlamak axios.defaults.withCredentials = true;

veya kullanabileceğiniz bazı özel talepler için axios.get(url,{withCredentials:true})

Bu, 'Erişim-Kontrol-İzin-Menşeiniz' joker karaktere (*) ayarlanmışsa CORS hatası verecektir. Bu nedenle talebinizin menşe url'sini belirttiğinizden emin olun

örneğin: isteği localhost: 3000 üzerinde çalıştıran ön ucunuz, yanıt başlığını şu şekilde ayarlayın:

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

ayrıca ayarla

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

Yani tam olarak aynı sorunu yaşadım ve hayatımın yaklaşık 6 saatini arayarak kaybettim.

withCredentials: true

Ancak tarayıcı, tuhaf bir nedenden ötürü yapılandırma ayarını karıştırma fikrini bulana kadar çerezi kaydetmedi:

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

Görünüşe göre her zaman önce 'withCredentials' Anahtarını göndermelisiniz.

withCredentialsİstekte tanımlama bilgilerini iletmek için özelliği kullanabilirsiniz .

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

Ayarına göre { withCredentials: true }çapraz menşe sorunla karşılaşabilir. Bunu çözmek için kullanmanız gereken

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

Burada Credentials ile ilgili bilgileri okuyabilirsiniz

İki düşünceyi karıştırıyorsunuz.

"React-cookie" ve "axios" a sahipsiniz

react-cookie =>, çerezi istemci tarafında işlemek içindir

axios => sunucuya ajax istekleri göndermek içindir

Bu bilgilerle, istemci tarafındaki çerezlerin arka uç tarafında da iletilmesini istiyorsanız, bunları birbirine bağlamanız gerekecektir.

"React-cookie" Benioku'dan not:

İzomorfik kurabiyeler!

Sunucu oluşturma işlemi sırasında kullanıcı tanımlama bilgilerine erişebilmek için plugToRequest veya setRawCookie'yi kullanabilirsiniz.

benioku bağlantısı

İhtiyacın olan buysa harika.

Değilse, daha fazla ayrıntı verebilmem için lütfen yorum yapın.