javascript - Fetch API के साथ प्रतिक्रिया हेडर पढ़ना




google-chrome-extension (2)

मैं "*://*/*" लिए Google Chrome एक्सटेंशन में हूं और मैं XMLHttpRequest से Fetch API पर स्विच करने का प्रयास कर रहा हूं।

एक्सटेंशन, उपयोगकर्ता-इनपुट लॉगिन डेटा को संग्रहीत करता है जो सीधे एक्सएचआर के ओपन () HTTP प्रमाणीकरण के लिए कॉल में इस्तेमाल किया जाता था, लेकिन फ़ेच के तहत अब सीधे पैरामीटर के रूप में उपयोग नहीं किया जा सकता है। HTTP बेसिक ऑथ के लिए, इस सीमा को दरकिनार करना तुच्छ है, क्योंकि आप मैन्युअल रूप से प्राधिकरण हेडर सेट कर सकते हैं:

fetch(url, {
  headers: new Headers({ 'Authorization': 'Basic ' + btoa(login + ':' + pass) })
  } });

HTTP डाइजेस्ट ऑथ को हालांकि अधिक अन्तरक्रियाशीलता की आवश्यकता होती है; आपको पैरामीटर पढ़ने की ज़रूरत है कि एक वैध प्राधिकरण टोकन को शिल्प करने के लिए सर्वर आपको इसकी 401 प्रतिक्रिया के साथ भेजता है। मैंने इस स्निपेट के साथ WWW-Authenticate रिस्पांस हेडर फ़ील्ड को पढ़ने की कोशिश की है:

fetch(url).then(function(resp) {
  resp.headers.forEach(function(val, key) { console.log(key + ' -> ' + val); });
}

लेकिन मुझे जो मिल रहा है, वह यह है:

content-type -> text/html; charset=iso-8859-1

जो अपने आप में सही है, लेकिन क्रोम के डेवलपर टूल के अनुसार यह अभी भी लगभग 6 और फ़ील्ड गायब है। अगर मैं resp.headers.get("WWW-Authenticate") उपयोग करता resp.headers.get("WWW-Authenticate") या उस मामले के लिए अन्य क्षेत्रों में से कोई भी), तो मुझे केवल null मिलता है।

Fetch API का उपयोग करके उन अन्य क्षेत्रों में जाने का कोई भी मौका?


ES2015 पुनरावृत्तियों का समर्थन नहीं करने वाले ब्राउज़रों के साथ पिछड़े संगतता के लिए (और शायद यह भी लाने / वादा पॉलीफ़िल की आवश्यकता है), Headers.forEach फ़ंक्शन सबसे अच्छा विकल्प है:

r.headers.forEach(function(value, name) {
    console(name + ": " + value);
});

आईई 11 में ब्लूबर्ड के साथ प्रोमिस पॉलीफिल और व्हाट्स-पॉर्च के रूप में व्हाट्स -ग्रेच का परीक्षण किया गया। Headers.entries (), Headers.keys () और Headers.values ​​() काम नहीं करता है।


जब आप CORS पर Fetch API का उपयोग कर रहे हैं, तो प्रतिक्रिया शीर्षकों तक पहुँचने के लिए प्रतिबंध है। इस प्रतिबंध के कारण, आप केवल मानक हेडर का उपयोग कर सकते हैं:

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

जब आप Google Chrome एक्सटेंशन के लिए कोड लिख रहे हैं, तो आप CORS का उपयोग कर रहे हैं, इसलिए आप सभी हेडर तक नहीं पहुंच सकते। यदि आप सर्वर को नियंत्रित करते हैं, तो आप headers बजाय प्रतिक्रिया body में कस्टम जानकारी वापस कर सकते हैं

इस प्रतिबंध पर अधिक जानकारी - https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types





google-chrome-extension