‘सीओआरएस पॉलिसी: नो एक्सेस-कंट्रोल-अनुमति-उत्पत्ति हेडर’ त्रुटि को कैसे ठीक करें

त्रुटि“मूल ‘…’ से ‘…’ लाने की पहुंच CORS नीति द्वारा अवरुद्ध कर दी गई है: कोई ‘पहुंच-नियंत्रण-अनुमति-उत्पत्ति’ हेडर मौजूद नहीं है” सबसे आम वेब विकास त्रुटियों में से एक है। इसे ब्राउज़र द्वारा एक सुरक्षा तंत्र के रूप में लागू किया जाता है। यहां हर कारण और समाधान है।

CORS क्यों मौजूद है (आवश्यक समझ)

CORS (क्रॉस-ओरिजिनल रिसोर्स शेयरिंग) दुर्भावनापूर्ण वेबसाइटों को आपके लॉग-इन कुकीज़ का उपयोग करके आपके बैंक के एपीआई के लिए अनुरोध करने से रोकता है। सीओआरएस के बिना, ill.com पर जाने से आपके सत्र कुकीज़ के साथ yourbank.com पर चुपचाप एपीआई कॉल हो सकती है। ब्राउज़र CORS को लागू करता है – सर्वर घोषित करते हैं कि कौन से मूल की अनुमति है।

CORS एक ब्राउज़र सुरक्षा सुविधा है — यह केवल ब्राउज़र द्वारा शुरू किए गए अनुरोधों पर लागू होता है। कर्ल, पोस्टमैन और सर्वर-टू-सर्वर अनुरोध CORS से प्रभावित नहीं होते हैं।

फिक्स 1: एक्सप्रेस.जेएस – कॉर्स पैकेज का उपयोग करना

npm install cors

const express = require('express');
const cors    = require('cors');
const app     = express();

// ✅ Allow specific origin (recommended for production)
app.use(cors({
  origin:      'https://yourfrontend.com',
  methods:     ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,   // required if frontend sends cookies/auth headers
}));

// ✅ Allow multiple origins
const allowedOrigins = ['https://app.example.com', 'https://admin.example.com'];
app.use(cors({
  origin: (origin, callback) => {
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`Origin ${origin} not allowed by CORS`));
    }
  },
  credentials: true,
}));

// ❌ Allow all origins (never in production with credentials)
app.use(cors({ origin: '*' }));
// Note: wildcard '*' cannot be used with credentials: true

फिक्स 2: एक्सप्रेस में मैनुअल सीओआरएस हेडर

// Without the cors package
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://yourfrontend.com');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');

  // Handle preflight requests
  if (req.method === 'OPTIONS') {
    return res.status(204).end();
  }
  next();
});

समाधान 3: नग्नेक्स रिवर्स प्रॉक्सी

location /api/ {
    proxy_pass http://localhost:3000/;

    # CORS headers
    add_header 'Access-Control-Allow-Origin' 'https://yourfrontend.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;

    # Handle preflight
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'https://yourfrontend.com';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

फिक्स 4: फ्रंटएंड – क्रेडेंशियल मोड

// ❌ Fetch without credentials — cookies not sent
const res = await fetch('https://api.example.com/user');

// ✅ Include credentials (cookies, authorization headers)
const res = await fetch('https://api.example.com/user', {
  credentials: 'include',   // send cookies cross-origin
});

// For axios:
axios.defaults.withCredentials = true;
// Or per-request:
axios.get('/api/user', { withCredentials: true });

महत्वपूर्ण: कबcredentials: 'include', सर्वर कोAccess-Control-Allow-Originसेट करना होगा विशिष्ट मूल के लिए (नहीं*) तथाAccess-Control-Allow-Credentials: true.

उड़ान-पूर्व अनुरोधों को समझना

“गैर-सरल” अनुरोधों (PUT, DELETE, कस्टम हेडर, एप्लिकेशन/json बॉडी) के लिए, ब्राउज़र यह जांचने के लिए पहले एक विकल्प प्रीफ़्लाइट अनुरोध भेजता है कि क्या वास्तविक अनुरोध की अनुमति है। यदि प्रीफ़्लाइट विफल हो जाता है, तो वास्तविक अनुरोध कभी निष्पादित नहीं होता है।

// Browser sends OPTIONS before POST with JSON body:
OPTIONS /api/users HTTP/1.1
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

// Server must respond:
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400  // cache preflight for 24 hours

विकास प्रॉक्सी (विकास के दौरान सीओआरएस से बचें)

// vite.config.ts — proxy /api to backend during dev
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  }
};

// package.json (Create React App) — proxy all /api requests
{
  "proxy": "http://localhost:3000"
}

प्रॉक्सी फ्रंटएंड (डेव सर्वर से) के समान मूल से अनुरोध करता है, विकास के दौरान सीओआरएस को पूरी तरह से दरकिनार कर देता है – उत्पादन सुरक्षा से समझौता किए बिना।

सामान्य गलतियाँ

// ❌ Mistake 1: CORS headers on wrong route
app.get('/api/data', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.json(data);
});
// OPTIONS preflight hits a different handler that doesn't have CORS headers

// ❌ Mistake 2: Setting headers after response sent
app.use(cors());
app.get('/data', authenticate, (req, res) => {
  res.header('Access-Control-Allow-Origin', '*');  // Too late if cors() runs first
});

// ❌ Mistake 3: Multiple conflicting CORS headers
// Browser rejects when two Access-Control-Allow-Origin headers present
// Don't set CORS in both nginx AND Express — pick one place

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: क्या मैं विकास के लिए ब्राउज़र में CORS को अक्षम कर सकता हूँ?
उत्तर: हाँ:open -a "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/chrome-dev". केवल स्थानीय विकास के लिए – इस ध्वज के साथ कभी भी वास्तविक साइटें ब्राउज़ न करें। प्रॉक्सी का उपयोग करना अधिक सुरक्षित है और इसके लिए सुरक्षा को अक्षम करने की आवश्यकता नहीं होती है।

प्रश्न: यह पोस्टमैन में क्यों काम करता है लेकिन ब्राउज़र में नहीं?
उत्तर: CORS केवल ब्राउज़रों द्वारा लागू किया जाता है। डाकिया ब्राउज़र सीओआरएस जांच के बिना सीधे अनुरोध भेजता है। यह पुष्टि करता है कि आपका सर्वर काम कर रहा है – आपको बस CORS हेडर जोड़ने की जरूरत है।

प्रश्न: क्या मुझे एप्लिकेशन में CORS हेडर जोड़ना चाहिए या रिवर्स प्रॉक्सी?
उत्तर: केवल एक स्थान। यदि nginx का उपयोग कर रहे हैं, तो nginx में हेडर जोड़ें और उन्हें एक्सप्रेस में न जोड़ें (डुप्लिकेट हेडर को रोकता है)। यदि nginx नियंत्रण के बिना किसी सेवा पर परिनियोजन किया जा रहा है, तो Express में जोड़ें।

प्रश्न: मेरा एपीआई एक ही मूल से क्यों काम करता है लेकिन क्रॉस-मूल से नहीं?
उत्तर: सीओआरएस बिल्कुल यही रोकता है – क्रॉस-ऑरिजिन अनुरोधों के लिए स्पष्ट सर्वर अनुमति की आवश्यकता होती है। समान-मूल अनुरोधों (समान डोमेन/पोर्ट पर फ्रंटएंड और एपीआई) को CORS हेडर की आवश्यकता नहीं है।

प्रश्न: क्या मैं CORS प्रॉक्सी सेवा का उपयोग कर सकता हूँ?
उ: विकास प्रोटोटाइप के लिए, cors-anywhere जैसी सेवाएँ काम करती हैं। उत्पादन के लिए कभी नहीं – आप अपने सभी एपीआई अनुरोध किसी तृतीय-पक्ष सेवा के माध्यम से भेज रहे हैं। अपने सर्वर पर CORS को ठीक से ठीक करें।

निष्कर्ष

उचितAccess-Control-Allow-Originजोड़कर CORS को ठीक करें आपके सर्वर पर हेडर – CORS को अक्षम करके या ब्राउज़र प्लगइन्स का उपयोग करके नहीं। Express.js के लिए,cors एनपीएम पैकेज सभी मामलों को सफाई से संभालता है। Nginx के लिए, प्रॉक्सी स्तर पर हेडर जोड़ें। विकास के लिए, CORS से पूरी तरह बचने के लिए Vite के प्रॉक्सी कॉन्फ़िगरेशन का उपयोग करें। हमेशा वाइल्डकार्ड के बजाय सटीक मूल निर्दिष्ट करें* उत्पादन में, विशेषकर क्रेडेंशियल्स का उपयोग करते समय।