यह CORS अनुरोध केवल फ़ायरफ़ॉक्स में विफल क्यों है?

Question

मैं क्रेडेंशियल और प्रीफलाइट अनुरोध के साथ सीओआरएस लागू कर रहा हूं और मैं थोड़ा सा रहस्यमय हूं कि क्यों प्रीफलाइट अनुरोध फ़ायरफ़ॉक्स 30 में लगातार विफल रहता है लेकिन सफारी (7.0.2) और क्रोम 35 में काम करता है। मुझे लगता है कि यह समस्या " Why does the preflight OPTIONS request of an authenticated CORS request work in Chrome but not Firefox? "क्योंकि मैं एक 401, बल्कि ब्राउज़र क्लाइंट से एक CORS विशेष संदेश नहीं मिल रहा है:

" क्रॉस-उत्पत्ति अनुरोध ब्लॉक किया गया:। एक ही मूल नीति http://myurl.dev.com पर दूरस्थ संसाधन पढ़ने की अनुमति नहीं देता यह हो सकता है संसाधन को उसी डोमेन पर ले जाकर या सीओआरएस सक्षम करके तय किया गया है। "

सर्वर पर:: विकल्प प्रतिक्रिया के लिए

हेडर:

• पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति

स्रोत कोड दिखा बिना, यहाँ मैं क्या कर रहा हूँ : [[यहां अनुरोध से मूल प्रतिलिपि]]

एक्सेस-कंट्रोल-अनुमति-तरीके: "पोस्ट प्राप्त करें विकल्प"

पहुंच-नियंत्रण-अनुमति दें-हेडर: "एक्स-अनुरोधित-साथ"

पहुंच-नियंत्रण-अनुमति दें-क्रेडेंशियल: "सही"

पोस्ट प्रतिक्रिया के लिए हेडर:

• Access- नियंत्रण-अनुमति दें-मूल: [[अनुरोध से मूल कॉपी यहाँ]]
• पहुंच-नियंत्रण-अनुमति दें-क्रेडेंशियल: "सही"

ब्राउज़र क्लाइंट में:

jQuery.ajax({ 
    url: requestUrl, 
    type: 'POST', 
    data: getData(), 
    xhrFields: { 
    withCredentials: true 
    } 
}); 

कल्पना के अनुसार, यह एक विकल्प preflight अनुरोध है जो अपने जवाब में CORS हेडर की जरूरत ट्रिगर किया जाएगा। मैंने कई बार डब्ल्यू 3 सी स्पेक के माध्यम से पढ़ा है और मैं पहचान नहीं सकता कि मैं क्या कर रहा हूं, अगर कुछ भी है, तो उस प्रीफलाइट प्रतिक्रिया में।

Answer 1

ध्यान दें कि फ़ायरफ़ॉक्स एकमात्र ब्राउज़र है जो यहां अनुपालन करता है। यदि Access-Control-Allow-Methods का पार्सिंग https://fetch.spec.whatwg.org/#cors-preflight-fetch में विफल रहता है तो नेटवर्क त्रुटि को वापस करने की आवश्यकता होती है। और हेडर वैल्यू के लिए एबीएनएफ के अनुसार यह निश्चित रूप से एक अल्पविराम से अलग मूल्य है।

Answer 2

मैंने देखा है कि जब आप कुकीज़ सेट के साथ सीओआरएस (क्रॉस ओरिजिनल रिसोर्स शेयरिंग) अनुरोध भेजते हैं, तो फ़ायरफ़ॉक्स आवश्यक प्रतिक्रिया शीर्षलेख नहीं भेजता है।

समाधान:

समाधान नीचे केवल विकल्प अनुरोधों के लिए हेडर कहते हैं और केवल example.com का अनुरोध स्वीकार करता है। आप अन्य अनुरोध विधियों और अपेक्षित मेजबानों के लिए कार्यान्वयन को बदल सकते हैं।

जे एस कोड

var xmlhttp = new XMLHttpRequest(); 
xmlhttp.withCredentials = true; 

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
     if (xmlhttp.status == 200) { 
      success_callback(xmlhttp.responseText); 
     } else { 
      error_callback(xmlhttp.statusText); 
     } 
    } 
}; 
xmlhttp.open("DELETE", url); 
xmlhttp.send(null); 

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

इस समस्या को दूर करने के लिए नीचे दिए गए NGINX सर्वर कॉन्फ़िगरेशन का उपयोग करें।

nginx कोड CORS पर

#handle CORS requests by adding required headers 
if ($http_origin ~* .example.com) { 
    set $cors "CORS-${request_method}"; 
} 

if ($cors = "CORS-OPTIONS") { 
    add_header 'Access-Control-Allow-Credentials' 'true'; 
    add_header 'Access-Control-Allow-Headers' 'Content-Type'; 
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE'; 
    add_header 'Access-Control-Allow-Origin' $http_origin; 
} 

अच्छा पढ़ा: https://www.html5rocks.com/en/tutorials/cors/