React में CORS: यह क्या है, यह क्यों महत्वपूर्ण है, और इसे सक्षम कैसे करें
React में CORS को समझना
CORS लंबे समय से डेवलपर्स—खासकर शुरुआत करने वालों—के लिए भ्रम और झुंझलाहट का स्रोत रहा है। यह अवधारणा समझने में कठिन हो सकती है, विशेष रूप से जब आप React, Angular, या Vue जैसे फ़्रेमवर्क के साथ सिंगल-पेज एप्लिकेशन (SPA) बना रहे हों और थर्ड-पार्टी API के साथ इंटरैक्ट करने की कोशिश कर रहे हों।
इस गाइड में, मैं आपको CORS को जड़ से समझने में मदद करूंगा। हम एक साधारण React ऐप और साथ में एक Express सर्वर बनाएंगे ताकि यह दिखा सकें कि CORS त्रुटियाँ किस वजह से ट्रिगर होती हैं और क्यों होती हैं। इससे भी महत्वपूर्ण, मैं आपको अलग-अलग तरीके दिखाऊँगा कि इन समस्याओं को कैसे हल किया जाए—सामान्य रूप से भी और विशेष रूप से React वातावरण में।
CORS क्या है?
CORS, या Cross-Origin Resource Sharing, एक प्रोटोकॉल है जो यह नियंत्रित करता है कि वेब एप्लिकेशन अलग-अलग ओरिजिन पर होस्ट किए गए सर्वरों से संसाधनों का अनुरोध कैसे करते हैं। जैसे HTTPS सुरक्षित संचार के नियम तय करता है, वैसे ही CORS क्रॉस-ओरिजिन अनुरोधों के लिए नियम तय करता है।
आधुनिक वेब ऐप सामान्यतः दो मुख्य भागों में विभाजित होते हैं: क्लाइंट (आपके ब्राउज़र में चलने वाला फ्रंटएंड) और सर्वर (आमतौर पर कोई API या बैकएंड सेवा)। क्लाइंट सर्वर को अनुरोध भेजता है—उदाहरण के लिए, डेटा फ़ेच करने के लिए—और सर्वर एक प्रतिक्रिया लौटाता है। CORS तब सामने आता है जब ये दोनों भाग अलग-अलग डोमेन, पोर्ट या प्रोटोकॉल पर होते हैं।
यह आर्किटेक्चर इतना सामान्य क्यों है
यह डिकपल्ड आर्किटेक्चर—जहाँ फ्रंटएंड और बैकएंड अलग-अलग एप्लिकेशन के रूप में विकसित और डिप्लॉय किए जाते हैं—तेजी से लोकप्रिय हो रहा है। एक बड़ा लाभ लचीलापन है: आपका बैकएंड कई प्रकार के क्लाइंट्स को सर्व कर सकता है, जिनमें वेब ऐप, डेस्कटॉप इंटरफेस, मोबाइल ऐप या यहाँ तक कि IoT डिवाइस शामिल हैं। प्रत्येक क्लाइंट बिना प्रेजेंटेशन लेयर से कड़े तौर पर बंधे, वही API कंज़्यूम कर सकता है।
सेम-ओरिजिन पॉलिसी और क्रॉस-ओरिजिन अनुरोध
क्योंकि क्लाइंट और सर्वर अलग-अलग एप्लिकेशन हैं, वे सामान्यतः अलग-अलग डोमेन, पोर्ट या प्रोटोकॉल पर होस्ट किए जाते हैं। इसका मतलब है कि जब आपका अपना फ्रंटएंड आपके अपने बैकएंड से संचार करने की कोशिश करता है, तब भी ब्राउज़र इस अनुरोध को क्रॉस-ओरिजिन मान सकता है।
जब आप थर्ड-पार्टी सेवाओं—प्रमाणीकरण, एनालिटिक्स, पेमेंट गेटवे आदि—के साथ काम करते हैं, तब यह और भी आम हो जाता है। इन सभी मामलों में, आपका फ्रंटएंड अलग ओरिजिन पर HTTP अनुरोध भेजकर इंटरैक्ट करता है।
और यहीं अड़चन आती है: आधुनिक ब्राउज़र सेम-ओरिजिन पॉलिसी नामक एक सुरक्षा फीचर लागू करते हैं, जो यह प्रतिबंधित करता है कि एक ओरिजिन पर चलने वाली स्क्रिप्ट्स दूसरे ओरिजिन के संसाधनों के साथ कैसे इंटरैक्ट कर सकती हैं। यहीं CORS काम आता है—यह एक मैकेनिज्म है जो सुरक्षित तरीके से उन क्रॉस-ओरिजिन अनुरोधों को सक्षम करता है।
ब्राउज़र क्रॉस-ओरिजिन अनुरोधों को क्यों ब्लॉक करते हैं
जब आपका वेब एप्लिकेशन किसी अलग ओरिजिन—जैसे कि अलग डोमेन, पोर्ट, या प्रोटोकॉल—से संसाधन अनुरोध करने की कोशिश करता है, तो ब्राउज़र Same-Origin Policy (SOP) नामक सुरक्षा फीचर लागू करता है। इस नीति का उद्देश्य संभावित रूप से दुर्भावनापूर्ण वेबसाइटों को बिना अनुमति किसी अन्य ओरिजिन के संवेदनशील डेटा तक पहुँचने से रोकना है।
ऐतिहासिक रूप से, इससे वेब काफी सुरक्षित हुआ। उदाहरण के लिए, xyz.com पर चल रही स्क्रिप्ट abcbank.com से बिना आहट के व्यक्तिगत डेटा नहीं उठा सकती थी, जिससे उपयोगकर्ताओं को क्रॉस-साइट हमलों से सुरक्षा मिलती थी। हालाँकि, सेम-ओरिजिन पॉलिसी वैध उपयोग-केस भी ब्लॉक कर देती है—जैसे जब आपका React ऐप localhost:3000 पर चल रहा हो और localhost:8080 पर चल रहे API या किसी बाहरी सेवा से डेटा फ़ेच करना चाहता हो।
समाधान: SOP प्रतिबंधों के लिए CORS
यहीं CORS—यानी Cross-Origin Resource Sharing—काम आता है।
CORS एक प्रोटोकॉल है जो Same-Origin Policy को नियंत्रित शर्तों के तहत ढीला करता है। यह सर्वरों को—विशिष्ट HTTP हेडर्स के माध्यम से—यह संकेत देने देता है कि कुछ क्रॉस-ओरिजिन अनुरोध सुरक्षित हैं और अनुमत हैं।
तो जब आपका क्लाइंट एप्लिकेशन किसी अलग ओरिजिन पर अनुरोध करता है, सर्वर विशेष CORS हेडर्स के साथ प्रतिक्रिया दे सकता है। ये हेडर एक "अनुमति-पत्र" की तरह काम करते हैं जो ब्राउज़र को बताते हैं: "यह क्रॉस-ओरिजिन अनुरोध अनुमत है।" परिणामस्वरूप, आपका ब्राउज़र अब प्रतिक्रिया को ब्लॉक नहीं करता, और संसाधन सफलतापूर्वक साझा हो जाता है।
जब CORS सक्षम होता है तो क्या होता है?
एक बार जब आपका ब्राउज़र किसी सर्वर की प्रतिक्रिया में CORS हेडर्स का पता लगा लेता है, तो वह आपके एप्लिकेशन को डेटा एक्सेस करने देता है—भले ही अनुरोध का ओरिजिन अलग हो। यही CORS का सार है: नियंत्रित तरीके से अलग-अलग ओरिजिन के बीच संसाधनों की पहुँच।
अब जब आपको यह अच्छी तरह समझ में आ गया है कि CORS क्या है और इसकी आवश्यकता क्यों है, तो आइए इसे व्यवहार में देखने के लिए एक हैंड्स-ऑन उदाहरण से गुज़रते हैं। यदि आप और गहराई में जाना चाहते हैं, तो आप इस विस्तृत CORS गाइड को भी देख सकते हैं।
🛠️ चरण 1: API एंडपॉइंट्स के साथ एक Express सर्वर बनाएँ
यह दिखाने के लिए कि CORS कैसे काम करता है, हमें चाहिए:
-
एक क्लाइंट (React से बना) जो HTTP अनुरोध भेजे
-
एक सर्वर (Express से बना) जो उन अनुरोधों का उत्तर देने के लिए API एंडपॉइंट्स एक्सपोज़ करे
⚠️ एक वास्तविक CORS परिदृश्य ट्रिगर करने के लिए, क्लाइंट और सर्वर अलग-अलग ओरिजिन पर चलने चाहिए—उदाहरण के लिए, अलग पोर्ट जैसे localhost:3000 और localhost:8080।
🧱 सर्वर सेट अप करें
एक बेसिक Express सर्वर बनाकर शुरू करते हैं।
-
प्रोजेक्ट फ़ोल्डर बनाइए:
mkdir cors-server && cd cors-server
-
नया Node.js प्रोजेक्ट इनिशियलाइज़ करें:
npm init -y
यह डिफॉल्ट मानों के साथ एक package.json फ़ाइल बनाता है।
-
Express इंस्टॉल करें:
npm install express
-
ऐप एंट्री फ़ाइल बनाएँ:
रूट डायरेक्टरी में app.js नाम की फ़ाइल बनाएँ और निम्न कोड जोड़ें:
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Welcome to CORS server 😁');
});
app.get('/cors', (req, res) => {
res.send('This has CORS enabled 🎈');
});
app.listen(8080, () => {
console.log('Listening on port 8080');
});
यह दो एंडपॉइंट्स वाला न्यूनतम Express सर्वर है:
-
/एक वेलकम संदेश लौटाता है। -
/corsएक ऐसे रिसोर्स एंडपॉइंट का अनुकरण करता है जिसे आप अपने React ऐप से फ़ेच करेंगे।
-
सर्वर चलाएँ:
node app
स्टार्ट होने के बाद, अपने ब्राउज़र में http://localhost:8080/ खोलें, और आपको यह दिखना चाहिए:
Welcome to CORS server 😁
और यदि आप http://localhost:8080/cors खोलते हैं, तो आपको कुछ इस तरह दिखाई देगा:
⚛️ चरण 2: React ऐप सेट अप करें
अब जबकि हमारा Express सर्वर चल रहा है, यह समय है एक साधारण React ऐप बनाने का जो उस सर्वर पर HTTP अनुरोध भेजे—और जान-बूझकर एक CORS त्रुटि को ट्रिगर करे ताकि हम सीख सकें कि इसे कैसे ठीक करना है।
📦 नया React प्रोजेक्ट बनाएँ
अपने सर्वर से अलग किसी डायरेक्टरी में निम्न कमांड चलाएँ:
npx create-react-app react-cors-guide
यह react-cors-guide नाम के फ़ोल्डर में एक बुनियादी React ऐप स्कैफोल्ड कर देगा।
हो जाने पर, प्रोजेक्ट डायरेक्टरी में जाएँ और src/App.js फ़ाइल खोलें। इसकी सामग्री को निम्न कोड से बदल दें:
import { useEffect } from 'react';
import './App.css';
function App() {
const makeAPICall = async () => {
try {
const response = await fetch('http://localhost:8080/', { mode: 'cors' });
const data = await response.json();
console.log({ data });
} catch (error) {
console.error('CORS error:', error);
}
};
useEffect(() => {
makeAPICall();
}, []);
return (
<div className="App">
<h1>React CORS Guide</h1>
</div>
);
}
export default App;
🧠 यहाँ क्या हो रहा है?
-
हम
makeAPICallफ़ंक्शन परिभाषित करते हैं जो Fetch API का उपयोग करकेhttp://localhost:8080/परGETअनुरोध भेजता है। -
{ mode: 'cors' }विकल्प स्पष्ट रूप से ब्राउज़र को बताता है कि यह एक क्रॉस-ओरिजिन अनुरोध है। -
useEffectहुक सुनिश्चित करता है कि<App />कॉम्पोनेंट माउंट होते ही अनुरोध किया जाए।
🔥 एक CORS त्रुटि की उम्मीद करें
यदि आप React ऐप को इस तरह चलाते हैं:
npm start
और अपने ब्राउज़र के डेवलपर कंसोल की जाँच करते हैं, तो आपको संभवतः CORS त्रुटि दिखाई देगी, जैसे:
http://localhost:3000 ओरिजिन से http://localhost:8080/ पर फ़ेच एक्सेस CORS पॉलिसी द्वारा ब्लॉक कर दिया गया है।
यह ब्राउज़र की Same-Origin Policy अपना काम कर रही है: अलग ओरिजिन से संसाधन तक पहुँच को ब्लॉक करना।
CORS त्रुटि को समझना
जो त्रुटि आपने ब्राउज़र कंसोल में देखी, वह एक क्लासिक CORS समस्या है। भले ही आपका क्लाइंट और सर्वर दोनों localhost पर चल रहे हों, वे अलग-अलग पोर्ट पर हैं—React localhost:3000 पर और Express localhost:8080 पर।
इसका मतलब है कि Same-Origin Policy (SOP) के अनुसार वे अलग ओरिजिन माने जाते हैं, और सुरक्षा कारणों से ब्राउज़र अनुरोध को ब्लॉक कर देता है।
⚠️ सामान्य CORS त्रुटि संदेश
ब्राउज़र ने संभवतः आपको यह बताया होगा:
Access to fetch at 'http://localhost:8080/' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is
present on the requested resource. If an opaque response serves your needs,
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
इसे टुकड़ों में समझते हैं:
-
ब्राउज़र ने प्रतिक्रिया को ब्लॉक किया क्योंकि उसे सर्वर की प्रतिक्रिया में
Access-Control-Allow-Originहेडर नहीं मिला। -
यह एक वर्कअराउंड भी सुझाता है—फ़ेच मोड को
'no-cors'सेट करना—लेकिन इससे एक सीमित, opaque प्रतिक्रिया मिलेगी जिसके साथ आप काम नहीं कर पाएँगे। -
और सबसे महत्वपूर्ण: क्लाइंट ने कुछ गलत नहीं किया। CORS क्लाइंट-साइड त्रुटि नहीं है—यह एक ब्राउज़र द्वारा लागू नियम है जो सर्वर की प्रतिक्रिया पर आधारित है।
✅ CORS हमेशा सर्वर पर ही संभालना चाहिए
क्योंकि यह सर्वर की प्रतिक्रिया है जो तय करती है कि ब्राउज़र एक्सेस की अनुमति देगा या नहीं, सही समाधान यह है कि आप अपने सर्वर को सही CORS हेडर्स भेजने के लिए कॉन्फ़िगर करें।
आप डेवलपमेंट के दौरान प्रॉक्सी का उपयोग करके क्लाइंट साइड पर CORS से बच सकते हैं—लेकिन साफ़-सुथरा और प्रोडक्शन-सेफ़ तरीका सर्वर पर सीधे CORS सक्षम करना है।
🔧 Express सर्वर पर CORS सक्षम करें
अपने Express सर्वर में app.js पर वापस जाएँ और /cors एंडपॉइंट अपडेट करें:
app.get('/cors', (req, res) => {
res.set('Access-Control-Allow-Origin', '*');
res.send({ msg: 'This has CORS enabled 🎈' });
});
यहाँ क्या हो रहा है:
-
Access-Control-Allow-Originहेडर को*पर सेट किया गया है, जिसका मतलब है कि कोई भी ओरिजिन इस संसाधन तक पहुँच सकता है। -
यह डेमो के लिए CORS सक्षम करने का एक तेज़ और आसान तरीका है। (बाद में, आप केवल विशिष्ट ओरिजिन को अनुमति देने के लिए एक्सेस सीमित करना चाहेंगे।)
🔁 React क्लाइंट अपडेट करें
अब, अपने React ऐप में वापस जाएँ और फ़ेच URL को नए एंडपॉइंट पर लक्ष्यित करने के लिए अपडेट करें:
const response = await fetch('http://localhost:8080/cors', { mode: 'cors' });
अपने बदलाव सेव करें और आवश्यकता हो तो React डेवलपमेंट सर्वर को रीस्टार्ट करें।
🧪 परीक्षण करें
अपने ब्राउज़र में ऐप को रिफ़्रेश करें। इस बार, ब्राउज़र प्रतिक्रिया को अनुमति देगा, और आपको अपने कंसोल में निम्न लॉग दिखेगा:
{ data: { msg: 'This has CORS enabled 🎈' } }
सफलता! आपने CORS को सही तरीके से कॉन्फ़िगर करके अपना पहला क्रॉस-ओरिजिन अनुरोध कर लिया है।
फ़िक्स की पुष्टि: CORS काम कर रहा है!
एक बार जब सर्वर पर CORS हेडर सही तरीके से सेट हो जाता है, तो त्रुटि गायब हो जाती है और आपका React ऐप सफलतापूर्वक JSON के रूप में प्रतिक्रिया प्राप्त कर लेता है। 🎉 सब कुछ उम्मीद के मुताबिक काम करता है! बस यह न भूलें—परिवर्तनों को प्रभावी करने के लिए आपको अपने बैकएंड सर्वर को रीस्टार्ट करना पड़ सकता है।
🎯 विशिष्ट ओरिजिन तक CORS को सीमित करना
* वाइल्डकार्ड का उपयोग करने के बजाय, जो किसी भी ओरिजिन को आपके संसाधनों तक पहुँचने देता है, आप CORS को किसी विशिष्ट डोमेन तक सीमित कर सकते हैं—उदाहरण के लिए, अपना React डेवलपमेंट सर्वर:
app.get('/cors', (req, res) => {
res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
res.send({ msg: 'This has CORS enabled 🎈' });
});
यह प्रोडक्शन वातावरण के लिए अनुशंसित है ताकि अनधिकृत वेबसाइटें आपके API तक पहुँच न बना सकें।
⚠️ जब आप सर्वर को संशोधित नहीं कर सकते
हालाँकि सर्वर को संशोधित करना CORS संभालने का सबसे साफ़ और मजबूत तरीका है, यह हमेशा संभव नहीं होता। कई डेवलपर्स को तब यह समस्या होती है जब वे थर्ड-पार्टी API—प्रमाणीकरण, नोटिफ़िकेशन, ईमेल सेवाएँ आदि—का उपयोग करते हैं। उन मामलों में, आप सर्वर की CORS नीति नहीं बदल सकते।
यदि ऐसा होता है, तो क्या आप फँस गए… या कोई उपाय है?
🧞♂️ वर्कअराउंड: React में प्रॉक्सी का उपयोग
React डेवलपमेंट के लिए एक चतुर वर्कअराउंड यह है: अपने API अनुरोधों को डेवलपमेंट सर्वर के माध्यम से प्रॉक्सी करें।
प्रॉक्सिंग को ऐसे समझें जैसे आप कक्षा में किसी साथी के लिए हाज़िरी लगा रहे हों—आपका ऐप यह दिखाता है कि अनुरोध किसी अलग स्रोत (यानी सर्वर के ओरिजिन) से आया है, जिससे ब्राउज़र की SOP पाबंदियाँ बाईपास हो जाती हैं।
✏️ प्रॉक्सी कैसे सेट करें
-
React प्रोजेक्ट रूट में अपनी
package.jsonफ़ाइल खोलें। -
proxyफ़ील्ड जोड़ें:
{
...
"proxy": "http://localhost:8080"
}
-
अपने React डेवलपमेंट सर्वर को रीस्टार्ट करें (
npm start), और अब सभी अनुरोध चुपचाप बैकएंड के माध्यम से रूट हो जाएँगे।
जब आप /cors से डेटा फ़ेच करते हैं, उदाहरण के लिए:
const response = await fetch('/cors');
यह आंतरिक रूप से http://localhost:8080/cors पर प्रॉक्सी हो जाता है, जिससे ब्राउज़र को अनुरोध same-origin जैसा लगता है।
🧪 थर्ड-पार्टी सेवा उपयोग करना चाहते हैं?
कोई बात नहीं! आप वहाँ भी प्रॉक्सी कर सकते हैं:
{
...
"proxy": "https://randomservice.com"
}
ध्यान रखें:
-
केवल non-HTML (आमतौर पर API) अनुरोध प्रॉक्सी किए जाते हैं।
-
आपके अनुरोध का
Acceptहेडर text/html नहीं होना चाहिए। -
अधिक जटिल सेटअप (जैसे, कई प्रॉक्सी) के लिए, कस्टम प्रॉक्सी व्यवहार कॉन्फ़िगर करने हेतु http-proxy-middleware का उपयोग करें।
🧹 समापन: React में CORS के लिए सर्वोत्तम प्रथाएँ
CORS के मामले में, याद रखने योग्य बातें:
-
हमेशा सर्वर स्तर पर CORS को ठीक करें—यही सबसे विश्वसनीय और सुरक्षित समाधान है।
-
डेवलपमेंट के दौरान, React का प्रॉक्सी सेटअप आपको सर्वर में बदलाव किए बिना CORS समस्याओं से बचने में मदद कर सकता है।
-
यदि आप API सर्वर को नियंत्रित नहीं करते, तो प्रदाता से संपर्क करें—या अपना स्वयं का प्रॉक्सी सर्वर उपयोग करें।
-
CORS Unblock जैसे Chrome एक्सटेंशन अस्थायी रूप से काम कर सकते हैं, लेकिन प्रोडक्शन में कभी उपयोग नहीं करने चाहिए।
-
अपनी फ़ेच रिक्वेस्ट में हमेशा
{ mode: 'cors' }निर्दिष्ट करें ताकि व्यवहार स्पष्ट रहे। -
समझ लें कि अधिकांश ब्राउज़र-आधारित वर्कअराउंड डिप्लॉयमेंट के बाद काम नहीं करेंगे—प्रोडक्शन की योजना पहले से बनाएँ।