उत्पादन में विफल होने वाले कॉर्स प्रीफ़्लाइट विकल्प अनुरोध को कैसे ठीक करें

आपका एपीआई विकास में काम करता है लेकिनके साथ उत्पादन में विफल रहता है सीओआरएस प्रीफ्लाइट अनुरोध एक्सेस कंट्रोल जांच पास नहीं करता है या विकल्प अनुरोध 404/405 लौटाता है। उड़ान-पूर्व विफलताएँ एक सामान्य केवल-उत्पादन CORS समस्या है। यहां उनका निदान करने और उन्हें ठीक करने का तरीका बताया गया है।

उड़ान-पूर्व अनुरोध क्या है?

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

# Browser automatically sends this before your POST:
OPTIONS /api/users HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization

# Server MUST respond with matching CORS headers and 2xx status

कारण 1: सर्वर विकल्पों को संभाल नहीं पाता

// 🐛 Express route only handles POST, not OPTIONS preflight
app.post('/api/users', createUser);
// The OPTIONS preflight hits no handler → 404/405 → preflight fails

// ✅ Use the cors middleware which handles OPTIONS automatically
const cors = require('cors');
app.use(cors({
  origin: 'https://app.example.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
}));
// cors() responds to preflight OPTIONS requests before your routes

कारण 2: रिवर्स प्रॉक्सी स्ट्रिप्स या ब्लॉक विकल्प

# nginx — explicitly handle OPTIONS preflight
location /api/ {
    # Handle preflight
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'https://app.example.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;
        add_header 'Access-Control-Max-Age' 86400 always;
        add_header 'Content-Length' 0;
        return 204;   # respond to preflight with 204 No Content
    }

    proxy_pass http://localhost:3000;
    add_header 'Access-Control-Allow-Origin' 'https://app.example.com' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
}

कारण 3: क्रेडेंशियल्स के साथ वाइल्डकार्ड उत्पत्ति

// 🐛 Wildcard origin CANNOT be used with credentials
app.use(cors({
  origin: '*',              // ❌ fails when credentials: true
  credentials: true,
}));
// Browser error: "Access-Control-Allow-Origin cannot be '*' when
// credentials mode is 'include'"

// ✅ Specify the exact origin
app.use(cors({
  origin: 'https://app.example.com',   // exact origin, not *
  credentials: true,
}));

// ✅ For multiple origins, echo the matching one
const allowed = ['https://app.example.com', 'https://admin.example.com'];
app.use(cors({
  origin: (origin, cb) => {
    if (!origin || allowed.includes(origin)) cb(null, true);
    else cb(new Error('Not allowed by CORS'));
  },
  credentials: true,
}));

कारण 4: अनुमत शीर्षलेख गुम

// The preflight lists headers the real request will send.
// The server must allow ALL of them, or preflight fails.

// 🐛 Real request sends Authorization but server doesn't allow it
allowedHeaders: ['Content-Type'],   // missing Authorization

// ✅ Allow every custom header your client sends
allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'X-API-Key'],

// Check the browser's preflight to see what's requested:
// Access-Control-Request-Headers: authorization, content-type
// The server's Access-Control-Allow-Headers must include all of these

कारण 5: ऑथ मिडलवेयर CORS से पहले चलता है

// 🐛 Auth middleware rejects the OPTIONS preflight (no auth header on preflight!)
app.use(authenticate);   // blocks OPTIONS with 401
app.use(cors());

// ✅ CORS must come BEFORE auth so preflight passes
app.use(cors({ origin: 'https://app.example.com', credentials: true }));
app.use(authenticate);   // preflight already handled by cors()
// Preflight OPTIONS requests carry no credentials by design —
// they must not be blocked by auth

उड़ान पूर्व विफलताओं को डीबग करना

# Simulate the preflight with curl to see the server response
curl -X OPTIONS https://api.example.com/users \
  -H "Origin: https://app.example.com" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: Content-Type, Authorization" \
  -i

# Check the response has:
# HTTP/1.1 204 (or 200)  ← must be 2xx
# Access-Control-Allow-Origin: https://app.example.com  ← matches
# Access-Control-Allow-Methods: ...POST...  ← includes your method
# Access-Control-Allow-Headers: ...content-type, authorization...

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

प्रश्न: यह डेव में काम क्यों करता है लेकिन उत्पादन में विफल रहता है?
उत्तर: विकास अक्सर एक प्रॉक्सी (Vite/CRA) का उपयोग करता है जो पूरी तरह से CORS से बचता है, या एक अनुमेय डेव CORS कॉन्फिगरेशन का उपयोग करता है। उत्पादन में एक वास्तविक रिवर्स प्रॉक्सी (nginx) और सख्त कॉन्फ़िगरेशन है जहां प्रीफ्लाइट हैंडलिंग स्पष्ट होनी चाहिए।

प्रश्न: मेरा विकल्प अनुरोध 401 क्यों लौटाता है?
उ: आपका ऑथ मिडलवेयर CORS से पहले चल रहा है और प्रीफ़्लाइट को अस्वीकार कर रहा है (जिसमें डिज़ाइन के अनुसार कोई क्रेडेंशियल नहीं है)। प्रमाणीकरण से पहले CORS मिडलवेयर लगाएं ताकि प्रीफ़्लाइट अनुरोध पास हो जाएं।

प्रश्न: उड़ान से पहले कौन सा स्टेटस कोड लौटाना चाहिए?
ए: 204 (कोई सामग्री नहीं) या 200। कोई भी 2xx काम करता है। 404, 405, या 401 का मतलब है कि प्रीफ़्लाइट विफल हो गया और ब्राउज़र वास्तविक अनुरोध को अवरुद्ध कर देता है।

प्रश्न: क्या मैं nginx या ऐप में CORS हेडर सेट करता हूँ – दोनों में नहीं?
उत्तर: एक स्थान चुनें. डुप्लिकेटAccess-Control-Allow-Origin हेडर (nginx और Express दोनों से) ब्राउज़र को प्रतिक्रिया अस्वीकार करने का कारण बनता है। nginx या ऐप का उपयोग करें, दोनों का नहीं।

प्रश्न: मैं क्रेडेंशियल्स (कुकीज़) को क्रॉस-ओरिजिन की अनुमति कैसे दूं?
ए: सेटAccess-Control-Allow-Credentials: true और सर्वर पर एक सटीक मूल निर्दिष्ट करें (नहीं*) और उपयोग करेंcredentials: 'include' क्लाइंट फ़ेच में. तीनों एक साथ चाहिए।

निष्कर्ष

उत्पादन में CORS प्रीफ़्लाइट विफलताएँ आम तौर पर आती हैं: सर्वर विकल्पों को संभाल नहीं रहा है, एक रिवर्स प्रॉक्सी इसे अवरुद्ध कर रहा है, क्रेडेंशियल्स के साथ वाइल्डकार्ड उत्पत्ति, अनुमत हेडर गायब है, या प्रीफ़्लाइट को अस्वीकार करने वाला ऑथ मिडलवेयर। समाधान: का उपयोग करें मिडलवेयर (या स्पष्ट nginx विकल्प हैंडलिंग), क्रेडेंशियल्स का उपयोग करते समय सटीक उत्पत्ति निर्दिष्ट करें, अपने क्लाइंट द्वारा भेजे जाने वाले प्रत्येक हेडर को अनुमति दें, और ऑथ मिडलवेयर से पहले CORS डालेंcors.के साथ डिबग करें यह देखने के लिए अनुरोध करें कि सर्वर वास्तव में क्या लौटाता है – प्रीफ्लाइट को मिलान वाले CORS हेडर के साथ 2xx का जवाब देना होगा।curl -X OPTIONSके साथ डिबग करें यह देखने के लिए अनुरोध करें कि सर्वर वास्तव में क्या लौटाता है – प्रीफ्लाइट को मिलान वाले CORS हेडर के साथ 2xx का जवाब देना होगा।