JavaScript में CORS: Postman काम क्यों करता है, लेकिन ब्राउज़र नहीं?

परिचय: जब ब्राउज़र "नहीं" कहता है, और Postman "हाँ"

एक स्थिति की कल्पना करें: आप JavaScript में फ्रंटएंड लिख रहे हैं, और API को fetch अनुरोध भेज रहे हैं। जवाब में, कंसोल में एक लाल त्रुटि दिखाई देती है:

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.

आप अपना सिर पकड़ लेते हैं, Postman खोलते हैं, वही URL डालते हैं, Send दबाते हैं — और चमत्कार, डेटा आ जाता है! सर्वर काम कर रहा है? कर रहा है। तो ब्राउज़र अनुरोध को क्यों ब्लॉक कर रहा है?

यह स्थिति वेब डेवलपमेंट की एक क्लासिक समस्या है। Stack Overflow पर इस प्रश्न ने हजारों बार देखा गया है। आज हम इसके पीछे की बात समझेंगे और जानेंगे कि ऐसा क्यों होता है, CORS कैसे काम करता है और इसे कैसे ठीक किया जाए। चलिए शुरू करते हैं!

CORS क्या है और इसकी आवश्यकता क्यों है?

CORS (Cross-Origin Resource Sharing) ब्राउज़र का एक सुरक्षा तंत्र है। यह एक वेबसाइट (जैसे, http://localhost:3000) के JavaScript को दूसरी वेबसाइट (जैसे, https://api.example.com) पर अनुरोध करने से रोकता है, जब तक कि सर्वर स्पष्ट रूप से इसकी अनुमति न दे।

क्यों? ताकि कोई हमलावर आपके ब्राउज़र के माध्यम से किसी अन्य साइट से डेटा चुरा न सके। CORS के बिना, कोई भी स्क्रिप्ट आपका ईमेल, बैंक खाता पढ़ सकती थी — यह भयानक होता।

लेकिन यहाँ एक बारीकी है: CORS केवल ब्राउज़र में काम करता है। Postman, curl, सर्वर-साइड अनुरोध (Node.js, Python) — वे CORS की जाँच नहीं करते। यह पहला और मुख्य कारण है कि Postman काम करता है, जबकि JavaScript नहीं करता।

CORS कैसे काम करता है: सरल शब्दों में

जब आपका JavaScript (जैसे, fetch) एक क्रॉस-डोमेन अनुरोध करता है, तो ब्राउज़र दो काम करता है:

\n
1. अनुरोध के प्रकार की जाँच करता है।
\n
2. यदि आवश्यक हो, तो preflight-अनुरोध (OPTIONS) भेजता है।
\n

सरल अनुरोध बनाम Preflight

क्रॉस-डोमेन अनुरोध दो प्रकार के होते हैं:

\n
• सरल अनुरोध — यदि आप GET, POST या HEAD का उपयोग कर रहे हैं, और हेडर केवल बुनियादी हैं (Content-Type: text/plain, application/x-www-form-urlencoded, multipart/form-data)। ब्राउज़र अनुरोध भेजता है और प्रतिक्रिया हेडर Access-Control-Allow-Origin को देखता है।
\n
• Preflight-अनुरोध — यदि आप गैर-मानक हेडर (जैसे, Authorization), PUT/DELETE विधियाँ, या Content-Type: application/json का उपयोग कर रहे हैं। ब्राउज़र पहले एक OPTIONS अनुरोध भेजता है ताकि पूछ सके: "क्या ऐसा अनुरोध करने की अनुमति है?"
\n

यहाँ कोड में preflight का एक उदाहरण है:

fetch('https://api.example.com/data', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json', // यह preflight को ट्रिगर करता है\n    'Authorization': 'Bearer my-token'\n  },\n  body: JSON.stringify({ key: 'value' })\n})\n.then(response => response.json())\n.then(data => console.log(data))\n.catch(err => console.error('CORS error:', err));\n

यदि सर्वर OPTIONS पर सही Access-Control-Allow-Origin हेडर के साथ प्रतिक्रिया नहीं देता है — तो ब्राउज़र मुख्य अनुरोध को ब्लॉक कर देता है।

Postman CORS को क्यों अनदेखा करता है?

Postman एक ब्राउज़र नहीं है। यह समान-मूल नीति (Same-Origin Policy) का उपयोग नहीं करता है। यह केवल एक HTTP अनुरोध भेजता है और प्रतिक्रिया प्राप्त करता है। इसे इस बात से कोई फर्क नहीं पड़ता कि अनुरोध कहाँ से आया है — यह CORS हेडर की जाँच नहीं करता है। सर्वर जो कुछ भी लौटाता है, Postman वह प्रतिक्रिया दिखाता है।

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

CORS त्रुटि को कैसे ठीक करें: 3 वास्तविक तरीके

1. सर्वर को कॉन्फ़िगर करें (सही तरीका)

यदि आपके पास सर्वर तक पहुँच है, तो Access-Control-Allow-Origin हेडर जोड़ें। उदाहरण के लिए, Express के साथ Node.js पर:

const express = require('express');\nconst app = ex