𝗪𝗵𝘆 𝗟𝗼𝗰𝗮𝗹𝗵𝗼𝘀𝘁 𝗦𝘁𝗶𝗹𝗹 𝗧𝗿𝗶𝗴𝗴𝗲𝗿𝘀 𝗖𝗢𝗥𝗦 𝗘𝗿𝗿𝗼𝗿𝘀
आप अपना frontend localhost:3000 पर चलाते हैं। आप अपना backend localhost:5000 पर चलाते हैं। दोनों ऐप्स आपके लैपटॉप पर ही हैं। फिर भी, आपको CORS error दिखाई देता है।
ऐसा इसलिए होता है क्योंकि ब्राउज़र 'origin' को कैसे परिभाषित करते हैं।
एक origin तीन भागों से मिलकर बना होता है:
- Protocol
- Domain
- Port
इन दोनों की तुलना करें:
इनका protocol समान है। इनका domain समान है। लेकिन ये अलग-अलग ports का उपयोग करते हैं।
ब्राउज़र अलग-अलग ports को अलग-अलग origins के रूप में देखते हैं।
जब आपका React app आपके API को कॉल करता है, तो ब्राउज़र इसे एक cross-origin request के रूप में देखता है। वह उन्हें दो अलग-अलग entities के रूप में देखता है।
यह नियम क्यों मौजूद है? सुरक्षा (Security)।
यदि वेबसाइटें किसी भी API को स्वतंत्र रूप से कॉल कर पातीं, तो एक दुर्भावनापूर्ण (malicious) साइट:
- आपका बैंक डेटा पढ़ सकती थी।
- private APIs तक पहुँच सकती थी।
- आपकी ओर से कार्य कर सकती थी।
ब्राउज़र इसे रोकने के लिए Same-Origin Policy का उपयोग करते हैं। वेबसाइट A, वेबसाइट B को तब तक एक्सेस नहीं कर सकती जब तक वेबसाइट B अनुमति न दे दे।
CORS का अर्थ है Cross-Origin Resource Sharing। यह आपके सर्वर द्वारा ब्राउज़र को यह बताने का एक तरीका है: "मैं इस विशिष्ट origin से आने वाली requests पर भरोसा करता हूँ।"
आप अपने backend में एक header जोड़कर इसे ठीक कर सकते हैं: Access-Control-Allow-Origin: http://localhost:3000
यह ब्राउज़र को बताता है कि request सुरक्षित है।
भ्रम का एक सामान्य बिंदु: आप देखते हैं कि request आपके backend logs तक पहुँच रही है, लेकिन frontend विफल हो जाता है।
ऐसा इसलिए होता है क्योंकि:
- Frontend request भेजता है।
- Backend सफलतापूर्वक request प्राप्त करता है।
- Backend सफलतापूर्वक response भेजता है।
- ब्राउज़र response प्राप्त करता है और सुरक्षा नियमों के कारण उसे ब्लॉक कर देता है।
यह error एक ब्राउज़र सुरक्षा विशेषता (security feature) है।
Postman या cURL जैसे टूल्स काम करते हैं क्योंकि वे ब्राउज़र नहीं हैं। वे ब्राउज़र की सुरक्षा नीतियों (security policies) को लागू नहीं करते हैं।
ब्राउज़र इस तथ्य को नज़रअंदाज़ कर देता है कि दोनों ऐप्स आपके ही मशीन पर चल रहे हैं। उसे केवल origin से मतलब है।