यह उत्तर बहुत अधिक जमीन को कवर करता है, इसलिए इसे तीन भागों में विभाजित किया गया है:
- "नो एक्सेस-कंट्रोल-अलाउंस-ओरिजिन हेडर" समस्याओं को हल करने के लिए कॉर्स प्रॉक्सी का उपयोग कैसे करें
- कॉर्स प्रीफ़्लाइट से कैसे बचें
- "एक्सेस-कंट्रोल-अलाउंस-ओरिजनल हैडर को वाइल्डकार्ड नहीं होना चाहिए" समस्याओं को कैसे ठीक करें
"नो एक्सेस-कंट्रोल-अलाउंस-ओरिजिन हेडर" समस्याओं को हल करने के लिए कॉर्स प्रॉक्सी का उपयोग कैसे करें
यदि आप सर्वर को नियंत्रित नहीं करते हैं तो आपका फ़्रंट जावास्क्रिप्ट कोड एक अनुरोध भेज रहा है, और उस सर्वर से प्रतिक्रिया के साथ समस्या सिर्फ आवश्यक Access-Control-Allow-Origin
हेडर की कमी है , आप अभी भी काम कर सकते हैं - एक के माध्यम से अनुरोध करके कॉर्स प्रॉक्सी। यह दिखाने के लिए कि यह कैसे काम करता है, पहले यहाँ कुछ कोड है जो एक CORS प्रॉक्सी का उपयोग नहीं करता है:
const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(url)
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))
जिस कारण से catch
ब्लॉक हिट हो जाता है, ब्राउज़र उस कोड को उस प्रतिक्रिया तक पहुंचने से रोकता है जो वापस आती है https://example.com
। और ब्राउज़र जो करता है उसका कारण है, प्रतिक्रिया की कमी हैAccess-Control-Allow-Origin
प्रतिक्रिया शीर्ष लेख ।
अब, यहाँ एक ही उदाहरण है, लेकिन सिर्फ एक कोर प्रॉक्सी के साथ जोड़ा गया है:
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))
नोट: यदि https://cors-anywhere.herokuapp.com नीचे या अनुपलब्ध है, जब आप इसे आज़माते हैं, तो नीचे देखें कि कैसे केवल 2-3 मिनट में हरोकू में अपना स्वयं का कोरस एनीवेयर सर्वर तैनात करें।
ऊपर दिया गया दूसरा कोड स्निपेट प्रतिक्रिया URL तक सफलतापूर्वक पहुंच सकता है क्योंकि इसे अनुरोध URL में ले जाकर https://cors-anywhere.herokuapp.com/https://example.com पर बदल दिया जाता है - फिर इसे प्रॉक्सी URL के साथ प्रीफ़िक्स करना- कारण बनता है उस प्रॉक्सी के माध्यम से प्राप्त करने का अनुरोध, जो तब:
- आगे के लिए अनुरोध
https://example.com
।
- से प्रतिक्रिया प्राप्त करता है
https://example.com
।
- जोड़ता है
Access-Control-Allow-Origin
शीर्ष लेख को प्रतिक्रिया में ।
- उस प्रतिक्रिया को पास करता है, उस एडेड हेडर के साथ, रिक्वेस्टिंग फ्रंटेंड कोड पर।
ब्राउज़र तब फ्रंटएंड कोड को प्रतिक्रिया तक पहुंचने देता है, क्योंकि उस प्रतिक्रिया के साथ Access-Control-Allow-Origin
प्रतिक्रिया हेडर के प्रतिक्रिया जो ब्राउज़र देखता है।
आप https://github.com/Rob--W/cors-anywhere/ से कोड का उपयोग करके आसानी से अपना प्रॉक्सी चला सकते हैं ।
तुम भी आसानी से हर दिन सिर्फ 2-3 मिनट में 5 आदेशों के साथ हरकू को अपना प्रॉक्सी तैनात कर सकते हैं:
git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master
उन आदेशों को चलाने के बाद, आप अपने स्वयं के CORS कहीं भी सर्वर पर चलेंगे, जैसे, https://cryptic-headland-94862.herokuapp.com/ । तो फिर अपने अनुरोध URL को https://cors-anywhere.herokuapp.com
उपसर्ग करने के बजाय, अपने स्वयं के उदाहरण के लिए URL के बजाय उपसर्ग करें; जैसे, https://cryptic-headland-94862.herokuapp.com/https://example.com ।
इसलिए यदि आप https://cors-anywhere.herokuapp.com का उपयोग करने की कोशिश करने जाते हैं, तो आप पाते हैं कि यह नीचे है (जो कभी-कभी होगा), फिर एक हेरोकू खाता प्राप्त करने पर विचार करें (यदि आप पहले से ही नहीं हैं) और 2 लें या 3 मिनट के लिए कदम ऊपर Heroku पर अपने खुद के कोर सर्वर कहीं भी तैनात करने के लिए।
भले ही, आप अपना स्वयं का रन बनाते हैं या https://cors-anywhere.herokuapp.com या अन्य खुले प्रॉक्सी का उपयोग करते हैं , यह समाधान तब भी काम करता है, जब अनुरोध एक ऐसा हो जो ब्राउज़र को CORS प्रीफ़लाइट OPTIONS
अनुरोध करने के लिए ट्रिगर करता है - क्योंकि उस स्थिति में, प्रॉक्सी प्री-लाइट को सफल बनाने के लिए आवश्यक हेडर Access-Control-Allow-Headers
और Access-Control-Allow-Methods
हेडर भी वापस भेजती है ।
कॉर्स प्रीफ़्लाइट से कैसे बचें
प्रश्न में कोड एक CORS प्रीफ़्लाइट को ट्रिगर करता है - क्योंकि यह Authorization
हेडर भेजता है ।
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
यहां तक कि इसके बिना, Content-Type: application/json
हेडर भी प्रीफ़्लाइट को ट्रिगर करेगा।
"प्रीफ़्लाइट" का क्या अर्थ है: इससे पहले कि ब्राउज़र POST
प्रश्न में कोड में कोशिश करता है , यह पहले OPTIONS
सर्वर को एक अनुरोध भेजेगा - यह निर्धारित करने के लिए कि क्या सर्वर ऑप्ट-इन कर रहा है जिसमें क्रॉस-ओरिजिन प्राप्त करना POST
शामिल है जिसमें Authorization
और Content-Type: application/json
हेडर शामिल हैं।
यह एक छोटे कर्ल स्क्रिप्ट के साथ बहुत अच्छा काम करता है - मुझे मेरा डेटा मिलता है।
इसके साथ ठीक से परीक्षण करने के लिए curl
, आपको OPTIONS
ब्राउज़र द्वारा भेजे गए प्रीफ़्लाइट अनुरोध का अनुकरण करना चाहिए :
curl -i -X OPTIONS -H "Origin: http://127.0.0.1:3000" \
-H 'Access-Control-Request-Method: POST' \
-H 'Access-Control-Request-Headers: Content-Type, Authorization' \
"https://the.sign_in.url"
… https://the.sign_in.url
जो भी आपका वास्तविक sign_in
URL है उसकी जगह।
ब्राउज़र को उस OPTIONS
अनुरोध से जो प्रतिक्रिया देखने की आवश्यकता है, उसमें हेडर शामिल होना चाहिए:
Access-Control-Allow-Origin: http://127.0.0.1:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type, Authorization
यदि OPTIONS
प्रतिक्रिया में उन हेडर शामिल नहीं हैं, तो ब्राउज़र वहीं रुक जाएगा और कभी POST
अनुरोध भेजने का प्रयास भी नहीं करेगा । इसके अलावा, प्रतिक्रिया के लिए HTTP स्थिति कोड एक 2xx होना चाहिए- आमतौर पर 200 या 204। यदि यह कोई अन्य स्थिति कोड है, तो ब्राउज़र वहीं बंद हो जाएगा।
प्रश्न में सर्वर OPTIONS
501 स्थिति कोड के साथ अनुरोध का जवाब दे रहा है , जिसका अर्थ है कि यह इंगित करने की कोशिश कर रहा है कि यह OPTIONS
अनुरोधों के लिए समर्थन को लागू नहीं करता है। अन्य सर्वर आमतौर पर इस मामले में 405 "विधि की अनुमति नहीं है" स्थिति कोड के साथ प्रतिक्रिया करते हैं।
तो आप कभी भी POST
उस सर्वर से अपने फ्रंटएंड जावास्क्रिप्ट कोड से सीधे अनुरोध करने में सक्षम नहीं होंगे, यदि सर्वर उस OPTIONS
अनुरोध का जवाब 405 या 501 या 200 या 204 के अलावा किसी अन्य चीज के साथ देता है या यदि आवश्यक नहीं है। प्रतिक्रिया हेडर।
प्रश्न में मामले के लिए प्रीफ़्लाइट को ट्रिगर करने से बचने का तरीका होगा:
- यदि सर्वर को
Authorization
अनुरोध शीर्षलेख की आवश्यकता नहीं है, लेकिन इसके बजाय (उदाहरण के लिए) POST
अनुरोध के शरीर में या क्वेरी पैरामीटर के रूप में एम्बेडेड प्रमाणीकरण डेटा पर निर्भर है
- अगर सर्वर को
POST
शरीर के लिए Content-Type: application/json
मीडिया प्रकार की आवश्यकता नहीं है, लेकिन इसके बजाय POST
शरीर को application/x-www-form-urlencoded
एक पैरामीटर json
(या जो भी) नाम के पैरामीटर के साथ स्वीकार किया जाता है, जिसका मान JSON डेटा है
"एक्सेस-कंट्रोल-अलाउंस-ओरिजनल हैडर को वाइल्डकार्ड नहीं होना चाहिए" समस्याओं को कैसे ठीक करें
मुझे एक और त्रुटि संदेश मिल रहा है:
प्रतिक्रिया में 'एक्सेस-कंट्रोल-अलाउंस-ओरिजिन' हेडर का मूल्य वाइल्डकार्ड '*' नहीं होना चाहिए जब अनुरोध का क्रेडेंशियल मोड 'शामिल' हो। उत्पत्ति ' http://127.0.0.1:3000 ' इसलिए उपयोग की अनुमति नहीं है। XMLHttpRequest द्वारा शुरू किए गए अनुरोधों का क्रेडेंशियल मोड withCredentials विशेषता द्वारा नियंत्रित किया जाता है।
क्रेडेंशियल शामिल करने वाले अनुरोध के लिए, ब्राउज़र आपके फ्रंटएंड जावास्क्रिप्ट कोड को प्रतिक्रिया तक पहुंचने नहीं देंगे यदि Access-Control-Allow-Origin
प्रतिक्रिया हेडर का मूल्य है *
। उस मामले में मूल्य के बजाय आपके फ्रंटएंड कोड की उत्पत्ति से बिल्कुल मेल खाना चाहिए http://127.0.0.1:3000
।
देखें Credentialed अनुरोध और वाइल्डकार्ड MDN HTTP अभिगम नियंत्रण में (CORS) का लेख।
यदि आप उस सर्वर को नियंत्रित करते हैं जिसे आप अनुरोध भेज रहे हैं, तो इस मामले से निपटने के लिए एक सामान्य तरीका Origin
अनुरोध शीर्ष लेख के मूल्य को लेने के लिए सर्वर को कॉन्फ़िगर करना है , और Access-Control-Allow-Origin
प्रतिक्रिया हैडर के मूल्य में उस प्रतिध्वनि / प्रतिध्वनि को प्रतिबिंबित करना है । उदाहरण के लिए, नगीनक्स के साथ:
add_header Access-Control-Allow-Origin $http_origin
लेकिन यह सिर्फ एक उदाहरण है; अन्य (वेब) सर्वर सिस्टम मूल मूल्यों को प्रतिध्वनित करने के समान तरीके प्रदान करते हैं।
मैं क्रोम का उपयोग कर रहा हूं। मैंने उस क्रोम कॉर्स प्लगिन का उपयोग करने का भी प्रयास किया
Chrome क्रोम प्लग इन स्पष्ट रूप से केवल सरलता Access-Control-Allow-Origin: *
से ब्राउज़र द्वारा देखे जाने वाले प्रतिक्रिया में हेडर इंजेक्ट करता है। यदि प्लगइन होशियार था, तो वह क्या कर रहा होगा, यह नकली Access-Control-Allow-Origin
प्रतिक्रिया हेडर के मूल्य को आपके फ्रंटेंड जावास्क्रिप्ट कोड के वास्तविक मूल में सेट कर रहा है http://127.0.0.1:3000
।
इसलिए उस प्लगइन का उपयोग करने से बचें, यहां तक कि परीक्षण के लिए भी। यह सिर्फ एक व्याकुलता है। यदि आप परीक्षण करना चाहते हैं कि आपको सर्वर से क्या प्रतिक्रियाएं मिल रही हैं, जिसमें कोई ब्राउज़र उन्हें फ़िल्टर नहीं कर रहा है, तो आप curl -H
ऊपर दिए अनुसार उपयोग करना बेहतर समझते हैं।
जहाँ तक fetch(…)
सवाल में अनुरोध के लिए सीमांत जावास्क्रिप्ट कोड है :
headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');
उन लाइनों को हटा दें। Access-Control-Allow-*
हेडर हैं प्रतिक्रिया हेडर। आप उन्हें अनुरोध में कभी नहीं भेजना चाहते। एकमात्र प्रभाव जो एक ब्राउज़र को ट्रिगर करने के लिए होगा वह है प्रीफ़्लाइट।