chrome · JavaScript
संदेश
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
इसका मतलब
request server तक पहुँचा और response भी आया, पर उस response में इस origin को अनुमति देने वाला header नहीं था, इसलिए browser ने उसे आपके JavaScript को देने से मना कर दिया। यह नियम केवल browser लागू करते हैं, इसीलिए वही URL curl से चल जाता है — लगता है कि server ठीक है और गड़बड़ी सिर्फ़ browser में है। सुधार हमेशा server पर होता है: response में Access-Control-Allow-Origin: http://localhost:3000 जोड़ें। frontend कुछ नहीं कर सकता, और यदि server आपका नहीं है तो अपने server के ज़रिए कॉल भेजने वाला proxy ही एकमात्र रास्ता है। Allow-Origin: * उन requests पर काम नहीं करता जो cookie भेजते हैं; उनके लिए सटीक origin और साथ में Allow-Credentials चाहिए।
सुधार
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data- कौन देता है
- chrome
- JavaScript
- 15
browser और node की त्रुटियाँ आमतौर पर यही बताती हैं कि क्या टूटा, यह नहीं कि वह मान ऐसा क्यों बना — आपने undefined पढ़ा, वह function नहीं था, वह JSON नहीं था — इसलिए सुधार की जगह उस पंक्ति से ऊपर है जिसने त्रुटि फेंकी, और ?. तथा डिफ़ॉल्ट मानों से केवल उस पंक्ति को चुप कराने पर वही समस्या और दूर जाकर, और कठिन रूप में लौट आती है।
एरर संदेश कैसे पढ़ें
- पहली पंक्ति से पढ़ें। जितना नीचे जाएँगे उतना वह औज़ार के भीतर की बात है; कारण आम तौर पर सबसे ऊपर लिखा होता है।
- फ़ाइल का नाम और पंक्ति संख्या दिखे तो वहीं से शुरू करें — stack का सबसे ऊपरी frame नहीं, बल्कि वह सबसे ऊपरी पंक्ति जिसमें आपकी लिखी फ़ाइल का नाम हो।
- संदेश को जैसा है वैसा खोजें, पर पहले अपने paths और variable नाम हटा दें — वही खोज को अटकाते हैं।
- वही स्थिति औज़ार के हर संस्करण में अलग शब्दों में आती है। नतीजे बेमेल लगें तो संस्करण संख्या भी जोड़ें।
- कोई सुधार चिपकाने से पहले देख लें कि वह क्या फेंक देगा। इनमें कुछ पलटे नहीं जा सकते।
अक्सर पूछे जाने वाले सवाल
Q. “Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.” का क्या मतलब है?
request server तक पहुँचा और response भी आया, पर उस response में इस origin को अनुमति देने वाला header नहीं था, इसलिए browser ने उसे आपके JavaScript को देने से मना कर दिया। यह नियम केवल browser लागू करते हैं, इसीलिए वही URL curl से चल जाता है — लगता है कि server ठीक है और गड़बड़ी सिर्फ़ browser में है। सुधार हमेशा server पर होता है: response में Access-Control-Allow-Origin: http://localhost:3000 जोड़ें। frontend कुछ नहीं कर सकता, और यदि server आपका नहीं है तो अपने server के ज़रिए कॉल भेजने वाला proxy ही एकमात्र रास्ता है। Allow-Origin: * उन requests पर काम नहीं करता जो cookie भेजते हैं; उनके लिए सटीक origin और साथ में Allow-Credentials चाहिए।
Q. इसे कैसे ठीक करें?
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data — चलाने से पहले ऊपर देख लें कि यह कमांड क्या फेंक देता है।
Q. यह कौन-सा औज़ार देता है?
chrome। यह JavaScript में आता है, और संदेश 23 शब्दों का है।