कैसे axios के साथ प्राधिकरण हेडर भेजने के लिए

Question 1

मैं axios.js के माध्यम से टोकन के साथ प्रमाणीकरण शीर्ष लेख कैसे भेज सकता हूं? मैंने सफलता के बिना कुछ चीजें आजमाई हैं, उदाहरण के लिए:

const header = `Authorization: Bearer ${token}`;
return axios.get(URLConstants.USER_URL, { headers: { header } });

मुझे यह त्रुटि देता है:

XMLHttpRequest cannot load http://localhost:8000/accounts/user/. Request header field header is not allowed by Access-Control-Allow-Headers in preflight response.

मैं इसे वैश्विक डिफ़ॉल्ट सेट करके काम पाने में कामयाब रहा, लेकिन मुझे लगता है कि यह एक अनुरोध के लिए सबसे अच्छा विचार नहीं है:

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

अपडेट करें :

कोल के जवाब से मुझे समस्या का पता लगाने में मदद मिली। मैं django-cors-headers मिडलवेयर का उपयोग कर रहा हूं जो पहले से ही डिफ़ॉल्ट रूप से प्राधिकरण हेडर को संभालता है।

लेकिन मैं त्रुटि संदेश को समझने में सक्षम था और मेरे अक्षीय अनुरोध कोड में एक त्रुटि तय की, जो इस तरह दिखना चाहिए

return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });

Question 2

पर गैर सरल HTTP अनुरोध आपके ब्राउज़र निर्धारित करने के लिए क्या संबंधित साइट पर विचार करता है भेजने के लिए सुरक्षित जानकारी में पहली बार एक "preflight" अनुरोध (एक विकल्प विधि अनुरोध) भेज देंगे (देखें यहाँ इस बारे में पार मूल नीति युक्ति के लिए)। प्रासंगिक हेडर में से एक जिसे होस्ट प्रीफ्लाइट प्रतिक्रिया में सेट कर सकता है Access-Control-Allow-Headers। यदि आप जो भी हेडर भेजना चाहते हैं, वे वाइटेल्ड हेडर्स या सर्वर के प्रीफ़्लाइट रिस्पांस की किसी भी सूची में सूचीबद्ध नहीं थे, तो ब्राउज़र आपके अनुरोध को भेजने से इंकार कर देगा।

आपके मामले में, आप Authorizationहेडर भेजने की कोशिश कर रहे हैं , जिसे हेडर भेजने के लिए सार्वभौमिक रूप से सुरक्षित नहीं माना जाता है। ब्राउज़र तब सर्वर से यह पूछने के लिए प्रीफ़लाइट अनुरोध भेजता है कि क्या वह उस हेडर को भेजना चाहिए। सर्वर या तो एक खाली Access-Control-Allow-Headersहेडर भेज रहा है (जिसका अर्थ है "किसी अतिरिक्त हेडर की अनुमति न दें") या वह हेडर भेज रहा है जो Authorizationअनुमत हेडर की अपनी सूची में शामिल नहीं है । इस वजह से, ब्राउज़र आपके अनुरोध को भेजने वाला नहीं है और इसके बजाय एक त्रुटि फेंककर आपको सूचित करने का विकल्प चुनता है।

कोई भी जावास्क्रिप्ट वर्कअराउंड जो आपको लगता है कि आप इस अनुरोध को भेज सकते हैं, वैसे भी इसे बग के रूप में माना जाना चाहिए क्योंकि यह क्रॉस मूल अनुरोध नीति के खिलाफ है जो आपका ब्राउज़र आपकी स्वयं की सुरक्षा के लिए लागू करने का प्रयास कर रहा है।

tl; dr - यदि आपAuthorizationहेडरभेजना चाहते हैं, तो आपके सर्वर को इसे अनुमति देने के लिए बेहतर तरीके से कॉन्फ़िगर किया गया था। अपने सर्वर को सेट करें ताकि यहहेडर केOPTIONSसाथ उस यूआरएल परएकअनुरोध काजवाब देAccess-Control-Allow-Headers: Authorization।

Question 3

इसे इस्तेमाल करे :

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );

Question 4

यह मेरे लिए काम किया है:

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });

Question 5

इसे हर अनुरोध में जोड़ने के बजाय, आप इसे डिफ़ॉल्ट डिफ़ॉल्ट के रूप में जोड़ सकते हैं।

axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`

Question 6

आप लगभग सही हैं, बस अपना कोड इस तरह समायोजित करें

const headers = { Authorization: `Bearer ${token}` };
return axios.get(URLConstants.USER_URL, { headers });

ध्यान दें कि मैं बैकटिक्स कहां रखता हूं, मैंने बीयरर के बाद '' जोड़ा, आप सर्वर-साइड पर संभालना सुनिश्चित करेंगे, तो आप छोड़ सकते हैं

Question 7

कॉल करने के बजाय axios.get फ़ंक्शन का उपयोग करें:

axios({ method: 'get', url: 'your URL', headers: { Authorization: `Bearer ${token}` } })

Question 8

आप यह कोशिश कर सकते हैं।

axios.get(
    url,
    {headers: {
            "Access-Control-Allow-Origin" : "*",
            "Content-type": "Application/json",
            "Authorization": `Bearer ${your-token}`
            }   
        }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );

Question 9

res.setHeader('Access-Control-Allow-Headers',
            'Access-Control-Allow-Headers, Origin,OPTIONS,Accept,Authorization, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');

Blockquote: आपको setHeader में विकल्प और प्राधिकरण जोड़ना होगा ()

इस परिवर्तन ने मेरी समस्या को ठीक कर दिया है, बस एक कोशिश करो!

Question 10

corsमिडलवेयर स्थापित करें । हम इसे अपने कोड से हल करने की कोशिश कर रहे थे, लेकिन सभी प्रयास बुरी तरह विफल रहे।

इसने यह काम किया:

cors = require('cors')
app.use(cors());

मूल लिंक