अपने अनुरोधों में Axios को स्वचालित रूप से कुकी भेजें

Question

मैं अपने एक्सप्रेस से क्लाइंट से अनुरोध भेज रहा हूं।

मैंने क्लाइंट पर एक कुकी सेट की है और मैं उस कुकी को सभी Axios रिक्वेस्ट्स से पढ़ना चाहता हूं, उन्हें हाथ से रिक्वेस्ट करने के लिए मैन्युअल रूप से जोड़े बिना।

यह मेरे ग्राहकों का अनुरोध उदाहरण है:

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

मैंने अपने Express.js सर्वर में इन गुणों का उपयोग करके हेडर या कुकीज़ तक पहुँचने का प्रयास किया:

req.headers
req.cookies

उनमें से किसी में भी कोई कुकीज़ नहीं थी। मैं कुकी पार्सर मिडलवेयर का उपयोग कर रहा हूं:

app.use(cookieParser())

मैं स्वचालित रूप से अनुरोध में Axios कुकीज कैसे भेजूं?

संपादित करें:

मैं इस तरह से क्लाइंट पर कुकी सेट करता हूं:

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 का उपयोग कर रहा है, यह सवाल के लिए प्रासंगिक नहीं है। एक कुकी सेट होने के बाद मैं बस अपने सभी अनुरोधों में कुकीज़ एम्बेड करना चाहता हूं।

Comments

आपने क्लाइंट पर कुकी कैसे सेट की? शो कोड उदाहरण कृपया :)

— Tzook Bar Noy

@TzookBarNoy ने प्रश्न में कोड जोड़ा

— कुनोक

कुकीज़ क्लाइंट द्वारा सेट-कुकी के साथ सर्वर द्वारा सेट की जाती हैं, मुझे लगता है कि आप क्लाइंट पर कुकी पढ़ने का मतलब है। कुकी प्रोटोकॉल के अनुसार, क्लाइंट को कुकी जारीकर्ता सर्वर के लिए अपने अनुरोधों में कुकी हेडर शामिल करना चाहिए।

— हंस पू

इस देखो stackoverflow.com/questions/53898031/...

— Ender बोनट

Answer 1

मुझे वही समस्या थी और withCredentialsसंपत्ति का उपयोग करके इसे ठीक किया ।

किसी अन्य डोमेन से XMLHttpRequest तब तक अपने स्वयं के डोमेन के लिए कुकी मान सेट नहीं कर सकता जब तक अनुरोध करने से पहले withCredentials सही पर सेट न हो।

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

Comments

यदि आप एक्सप्रेस ऐप से जुड़ने की कोशिश कर रहे हैं - तो आपको कॉर्स का उपयोग करने की आवश्यकता होगी, और इन सेटिंग्स का उपयोग करें। अनुरोध के मूल की आवश्यकता है। app.use (cors ({साख: सत्य, मूल: ' लोकलहोस्ट: 8080 '}));

— डॉग कॉफ़ी

ध्यान दें कि यह केवल तब काम करेगा जब Access-Control-Allow-Originप्रतिक्रिया हेडर वाइल्डकार्ड (*) पर सेट न हो

— जैरी झांग

@ जेरीजंग आपका क्या मतलब है? मैं एक ही मुद्दे का सामना कर रहा हूं, अगर इसका मतलब Access-Control-Allow-Originनहीं *है, तो मैं उस सर्वर के लिए अनुरोध नहीं करूंगा क्योंकि

— कोर

जिस Access-Control-Allow-Originडोमेन से आप XHR रिक्वेस्ट करना चाहते हैं, उसके लिए रिस्पॉन्स की वैल्यू सेट होनी चाहिए। जैसे https://a.comसर्वर है, https://b.comक्लाइंट है, और https://b.comकिसी के ब्राउज़र में लोड है और XMLHTTPRequestअनुरोध करने के लिए उपयोग कर रहा है https://a.com। सेट करने के लिए XMLHTTPRequest(आरंभिक https://a.com) के अलावा withCredential: true, सर्वर - को https://b.comभी कॉन्फ़िगर करने की आवश्यकता होती है ताकि प्रतिक्रिया हेडर में शामिल होAccess-Control-Allow-Origin: https://a.com

— जैरी झांग

मुझे इसमें थोड़ी समस्या है ... अगर मेरे पास क्लाइंट के रूप में सर्वर बी (यानी प्रतिक्रिया पृष्ठ) है, तो अगर मैं इसे सही पर सेट करता हूं, तो यह क्रेडेंशियल्स भेजेगा, न कि बी क्रेडेंशियल्स ... एलओएल। .. ठीक है, यह हास्यास्पद नहीं है।

— गोल्डड्रगन 007

Answer 2

टी एल; डॉ:

{ withCredentials: true } या axios.defaults.withCredentials = true

---

अक्षीय प्रलेखन से

withCredentials: false, // default

withCredentials इंगित करता है कि क्रेडेंशियल्स का उपयोग करके क्रॉस-साइट एक्सेस-कंट्रोल अनुरोध किया जाना चाहिए या नहीं

अगर तुम पास हो जाओ { withCredentials: true } अपने अनुरोध के साथ हैं तो यह काम करना चाहिए।

एक बेहतर तरीका के withCredentialsरूप trueमें स्थापित किया जाएगाaxios.defaults

axios.defaults.withCredentials = true

Comments

हर अनुरोध के साथ साख भेजना एक बुरा व्यवहार है। ये नियंत्रण एक कारण के लिए हैं। एक अन्य सेवा से बात करते हुए, अपने सभी कुकीज़ भेजना - चाहे उनका उपयोग न किया गया हो, शोषण के लिए परिपक्व है।

— Colm.anseo

@colminator के पास केवल कुकीज़ हैं जिनके सर्वर डोमेन उनके डोमेन के रूप में भेजे जाएंगे। (डिफ़ॉल्ट रूप से उन्हें किसी भी उप-डोमेन में नहीं भेजा जाएगा और पथ के आधार पर आगे फ़िल्टरिंग हो सकती है।) वास्तव में हम केवल सर्वर कुकीज़ भेज रहे हैं जो सर्वर द्वारा निर्धारित किए गए थे।

— M3RS

Answer 3

मैं एक्सियोस से परिचित नहीं हूं, लेकिन जहां तक ​​मुझे जावास्क्रिप्ट और एजैक्स में पता है एक विकल्प है

withCredentials: true

यह स्वचालित रूप से कुकी को क्लाइंट-साइड भेज देगा। एक उदाहरण के रूप में, यह परिदृश्य पासपोर्ट के साथ भी उत्पन्न होता है, जो सर्वर पर एक कुकी सेट करता है

Answer 4

एक्सप्रेस प्रतिक्रिया में आवश्यक हेडर सेट करना भी महत्वपूर्ण है। ये वे हैं जो मेरे लिए काम करते हैं:

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

Comments

जोड़ने X-PINGOTHERमें Access-Control-Allow-Headers(एक्सप्रेस 4.16, क्रोम 63 के साथ Node.js 6.9) मेरे लिए अनिवार्य किया गया है। चेक JakeElder : इस GitHub मुद्दे पर की पोस्ट github.com/axios/axios/issues/191#issuecomment-311069164

— फ़्रॉस्टी जेड

Answer 5

एक अन्य समाधान इस पुस्तकालय का उपयोग करने के लिए है:

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

जो एक्सियोस में "टफ कुकी" समर्थन को एकीकृत करता है। ध्यान दें कि इस दृष्टिकोण को अभी भी withCredentialsध्वज की आवश्यकता है ।

Answer 6

लोगों के लिए अभी भी इसे हल करने में सक्षम नहीं है, इस जवाब ने मुझे मदद की। stackoverflow उत्तर: 34558264

TLDR; {withCredentials: true}दोनों GST अनुरोध के साथ-साथ भ्रूण दोनों के लिए POST अनुरोध (कुकी प्राप्त करना) दोनों में सेट करने की आवश्यकता है ।

Comments

यह महत्वपूर्ण है। मैंने अपने कोड में इसे नजरअंदाज कर दिया था और यह सोचकर अच्छा समय बिताया कि { withCredentials: true }जीईटी के अनुरोध का कोई प्रभाव क्यों नहीं पड़ा।

— योगमांक

अत्यंत महत्वपूर्ण! withCredentials: trueअनुरोध कॉन्फ़िगरेशन में जोड़ने के बारे में बहुत चर्चा है लेकिन यह विवरण नहीं है। मैंने लगभग 2 दिन बिताए जब तक मैं इस समस्या को हल करने की कोशिश कर रहा था

— आर। अनटु

Answer 7

मैं स्वचालित रूप से अनुरोध में Axios कुकीज कैसे भेजूं?

सेट axios.defaults.withCredentials = true;

या कुछ विशिष्ट अनुरोध के लिए आप उपयोग कर सकते हैं axios.get(url,{withCredentials:true})

यदि आपके 'Access-Control-Allow-Origin' को वाइल्डकार्ड (*) पर सेट किया गया है, तो यह CORS त्रुटि देगा। इसलिए अपने अनुरोध के मूल के URL को निर्दिष्ट करना सुनिश्चित करें

पूर्व के लिए: यदि आपका फ्रंट-एंड जो अनुरोध करता है वह स्थानीयहोस्ट: 3000 पर चलता है, तो प्रतिक्रिया शीर्षलेख को इस प्रकार सेट करें

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

भी सेट करें

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

Answer 8

withCredentialsअनुरोध में कुकीज़ पास करने के लिए आप संपत्ति का उपयोग कर सकते हैं ।

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

सेट करके { withCredentials: true }आप क्रॉस ओरिजनल समस्या का सामना कर सकते हैं। जिसे हल करने के लिए आपको उपयोग करने की आवश्यकता है

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

यहाँ आप के साथ क्रेडेंशियल्स के बारे में पढ़ सकते हैं

Answer 9

आप दो सोच मिश्रित हो रहे हैं।

आपके पास "प्रतिक्रिया-कुकी" और "अक्ष" है

प्रतिक्रिया-कुकी => ग्राहक पक्ष पर कुकी को संभालने के लिए है

axios => सर्वर के लिए अजाक्स अनुरोध भेजने के लिए है

उस जानकारी के साथ, यदि आप चाहते हैं कि क्लाइंट की ओर से कुकीज़ बैकएंड साइड में भी संचारित हों, तो आपको उन्हें एक साथ जोड़ने की आवश्यकता होगी।

"प्रतिक्रिया-कुकी" से पढ़ें नोट:

आइसोमोर्फिक कुकीज़!

सर्वर-रेंडरिंग करते समय उपयोगकर्ता कुकीज़ का उपयोग करने में सक्षम होने के लिए, आप प्लगटॉइस्पेस्ट या सेटरवूकी का उपयोग कर सकते हैं।

वाचम लिंक

यदि यह वही है जो आपको चाहिए।

यदि नहीं, तो कृपया टिप्पणी करें ताकि मैं अधिक विस्तार कर सकूं।

Comments

plugToRequestवास्तव में क्या करता है? मुझे लगता है कि नोड सर्वर पर कुकीज़ का उपयोग करना है, सभी की जरूरत है cookie-parserमिडलवेयर (एक्सप्रेस एक्सप्रेस)?

— जियोबॉय

Answer 10

इसलिए मेरे पास यह एक ही मुद्दा था और अपने जीवन के लगभग 6 घंटे खोजते हुए खो गए, मेरे पास था

withCredentials: true

लेकिन ब्राउज़र अभी भी कुकी को नहीं बचाता है जब तक कि कुछ अजीब कारण के लिए मुझे कॉन्फ़िगरेशन सेटिंग में फेरबदल करने का विचार नहीं था:

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

लगता है कि आपको हमेशा 'withCredentials' कुंजी पहले भेजनी चाहिए।