BEST ARTICLE'S 🗞️✌️

React और Node.js में "CORS Policy Error" को हमेशा के लिए कैसे Fix करें: A Complete Advanced Guide

Ajay Singh 0

React और Node.js में "CORS Policy Error" को हमेशा के लिए कैसे Fix करें: A Complete Advanced Guide


नमस्ते दोस्तों! अगर आप Information Technology (IT) के स्टूडेंट हैं या Web Development सीख रहे हैं, तो आपने कभी न कभी Frontend (जैसे React.js, Angular, या Vue) को Backend API (जैसे Node.js/Express, Python, या PHP) से कनेक्ट करने की कोशिश की होगी।

और जैसे ही आपने API Call किया होगा, आपके ब्राउज़र के Console में एक लाल रंग का डरावना एरर आया होगा:

❌ "Access to fetch at 'http://localhost:5000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."


ज़्यादातर बिगिनर्स इस एरर को देखकर घबरा जाते हैं और StackOverflow से कोई भी रैंडम कोड कॉपी-पेस्ट कर लेते हैं। लेकिन इस आर्टिकल में, हम सिर्फ कोड कॉपी-पेस्ट नहीं करेंगे, बल्कि गहराई से समझेंगे कि CORS क्या है, क्यों आता है, और इसे Development और Production दोनों में हमेशा के लिए कैसे Fix किया जाए।

यह इंटरनेट पर मौजूद सबसे Detailed Guide है। चलिए शुरू करते हैं!

1. CORS क्या है और यह एरर क्यों आता है? (What is CORS?)

CORS का फुल फॉर्म है Cross-Origin Resource Sharing।

इसे समझने के लिए एक आसान उदाहरण लेते हैं। मान लीजिए आपका Frontend http://localhost:3000 पर चल रहा है (यह आपका घर है) और आपका Backend http://localhost:5000 पर चल रहा है (यह आपके दोस्त का घर है)।

वेब ब्राउज़र (जैसे Chrome, Firefox) में एक बहुत ही सख्त सिक्योरिटी फीचर होता है जिसे Same-Origin Policy (SOP) कहते हैं। इसका काम यह है कि यह किसी एक वेबसाइट (Origin) को दूसरी वेबसाइट के डेटा को बिना परमिशन के चुराने या इस्तेमाल करने से रोकता है।

जब आपका React ऐप (पोर्ट 3000) आपके Node.js सर्वर (पोर्ट 5000) से डेटा मांगता है, तो ब्राउज़र देखता है कि दोनों के Port अलग-अलग हैं (यानी Origin अलग हैं)। इसलिए ब्राउज़र उस रिक्वेस्ट को ब्लॉक कर देता है और CORS Error दे देता है।
 

Postman में CORS एरर क्यों नहीं आता?

आपने ध्यान दिया होगा कि जब आप उसी API को Postman में टेस्ट करते हैं, तो डेटा बिना किसी एरर के आ जाता है। ऐसा क्यों?
क्योंकि CORS ब्राउज़र का सिक्योरिटी फीचर है, सर्वर का नहीं। Postman एक ब्राउज़र नहीं है, इसलिए वह CORS पॉलिसी को इग्नोर कर देता है।



2. Backend (Node.js/Express) में CORS को कैसे Fix करें?

CORS को सही तरीके से फिक्स करने की ज़िम्मेदारी हमेशा Backend Server की होती है। सर्वर को ब्राउज़र को यह बताना होता है कि "हाँ, मैं इस Frontend को अपना डेटा इस्तेमाल करने की परमिशन देता हूँ।"

अगर आप Express.js इस्तेमाल कर रहे हैं, तो नीचे दिए गए स्टेप्स फॉलो करें:


Step 2.1: CORS Package Install करें

अपने Backend के टर्मिनल में जाएँ और यह npm पैकेज इनस्टॉल करें:
2. Backend (Node.js/Express) में CORS को कैसे Fix करें?
CORS को सही तरीके से फिक्स करने की ज़िम्मेदारी हमेशा Backend Server की होती है। सर्वर को ब्राउज़र को यह बताना होता है कि "हाँ, मैं इस Frontend को अपना डेटा इस्तेमाल करने की परमिशन देता हूँ।"

अगर आप Express.js इस्तेमाल कर रहे हैं, तो नीचे दिए गए स्टेप्स फॉलो करें:


Bash
npm install cors

Step 2.2: Basic CORS Setup (सिर्फ Development के लिए

अगर आप सिर्फ सीख रहे हैं या प्रोजेक्ट बना रहे हैं, तो आप सभी Origins को allow कर सकते हैं। अपनी server.js या app.js फाइल में यह कोड लिखें:

JavaScript
const express = require('express');
const cors = require('cors'); // CORS को इम्पोर्ट करें
const app = express();

// Middleware के रूप में CORS का इस्तेमाल करें
app.use(cors()); 

app.get('/api/data', (req, res) => {
    res.json({ message: "CORS Error अब खत्म हो गया है!" });
});

app.listen(5000, () => {
    console.stringify("Server is running on port 5000");
});


चेतावनी: app.use(cors()) का मतलब है कि दुनिया की कोई भी वेबसाइट आपकी API को कॉल कर सकती है। Production (Live वेबसाइट) में ऐसा कभी न करें!

3. Frontend (React) से CORS को कैसे Bypass करें? (Proxy Method)

कई बार आपके पास Backend का एक्सेस नहीं होता (मान लीजिए आप किसी 3rd Party Public API का इस्तेमाल कर रहे हैं) और आपको CORS एरर आ रहा है। ऐसे में आप Frontend से ही एक "Proxy" बना सकते हैं।

  1: Create React App (CRA) में Proxy सेट करना

अगर आपने अपना React प्रोजेक्ट npx create-react-app से बनाया है, तो अपनी package.json फाइल खोलें और सबसे नीचे यह लाइन जोड़ें:

JSON
{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "proxy": "http://localhost:5000"  // <--- यह लाइन जोड़ें (अपने Backend का URL)
}


अब अपने React में API कॉल करते समय पूरा URL लिखने के बजाय सिर्फ /api/data लिखें:


JavaScript
// पूरा URL (http://localhost:5000/api/data) लिखने की जरूरत नहीं है
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

  2: Vite React App में Proxy सेट करना (Modern Approach)

आजकल ज़्यादातर डेवलपर्स React के लिए Vite का इस्तेमाल करते हैं। Vite में proxy सेट करने के लिए अपनी vite.config.js फाइल खोलें और यह कोड लिखें:

JavaScript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // Backend URL
        changeOrigin: true,
        secure: false,
      }
    }
  }
})


महत्वपूर्ण नोट: Proxy का तरीका सिर्फ आपके Local Development मशीन पर काम करता है। जब आप अपने Frontend को Vercel या Netlify पर होस्ट (Deploy) करेंगे, तो Proxy काम नहीं करेगा। लाइव सर्वर के लिए आपको Step 2.3 (Backend में CORS सेट करना) ही फॉलो करना होगा।

4. Authentication (JWT / Cookies) और CORS में सबसे बड़ी गलती

बहुत से IT स्टूडेंट्स एक बड़ी गलती करते हैं। जब वे Login सिस्टम बनाते हैं और ब्राउज़र में HTTP-only Cookies सेव करना चाहते हैं, तो CORS फिर से ब्लॉक कर देता है, भले ही आपने Backend में CORS इनेबल कर दिया हो।

इस एरर को फिक्स करने के लिए आपको Frontend और Backend दोनों में Credentials को Allow करना होगा।

Frontend में (Axios इस्तेमाल करते समय):
JavaScript
import axios from 'axios';

axios.post('http://localhost:5000/api/login', {
    email: "test@test.com",
    password: "123"
}, {
    withCredentials: true // <--- यह लाइन बहुत ज़रूरी है!
}).then(response => {
    console.log(response.data);
});

Backend में (Express CORS Options में):

JavaScript
app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true // <--- Backend में भी इसे true करना अनिवार्य है!
}));

Preflight Request (OPTIONS) क्या है? (Advance Knowledge)

जब आप GET के अलावा कोई कॉम्प्लेक्स रिक्वेस्ट (जैसे POST, PUT, DELETE) भेजते हैं या Headers में Custom Authorization टोकन भेजते हैं, तो ब्राउज़र असली रिक्वेस्ट भेजने से पहले एक छोटी सी OPTIONS रिक्वेस्ट भेजता है। इसे Preflight Request कहते हैं।

यह सर्वर से पूछता है: "क्या मैं POST रिक्वेस्ट और यह Custom Header भेज सकता हूँ?"

अगर आपका सर्वर सही CORS Headers (जैसे Access-Control-Allow-Methods और Access-Control-Allow-Headers) के साथ जवाब नहीं देता, तो ब्राउज़र असली POST रिक्वेस्ट को वहीँ रोक देता है। npm cors पैकेज इसे आटोमेटिकली हैंडल कर लेता है, इसलिए Express.js में आपको इसकी चिंता करने की ज़्यादा ज़रुरत नहीं होती

निष्कर्ष (Conclusion)

CORS कोई बग (Bug) नहीं है, बल्कि यह वेब की दुनिया का एक बहुत ज़रूरी सिक्योरिटी फीचर है जो हैकर्स को आपकी साइट का डेटा चुराने से रोकता है।

समरी (Quick Summary):

  1. अगर आप Frontend डेवलपर हैं और Backend आपके पास नहीं है: Proxy का इस्तेमाल करें।
  2. अगर आप Full Stack डेवलपर हैं: Node.js में cors पैकेज इनस्टॉल करें और Origin सेट करें।
  3. अगर Cookies या Token भेज रहे हैं: Frontend में withCredentials: true और Backend CORS में credentials: true सेट करें।
  4. मुझे उम्मीद है कि यह Detailed Guide पढ़ने के बाद आपको जिंदगी में कभी CORS Error से डर नहीं लगेगा।

अगर आपका अभी भी कोई सवाल है या आपको किसी और IT/Programming एरर का समाधान चाहिए, तो नीचे Comment करके ज़रूर बताएं! इस आर्टिकल को अपने उन डेवलपर दोस्तों के साथ शेयर करें जो हमेशा CORS Error से परेशान रहते हैं।

Happy Coding! 🚀

































Tags

Post a Comment

एक टिप्पणी भेजें

और नया पुराने