क्रॉस-ओरिजिन (CORS) अनुरोधों में कुकीज़ न भेजे जाने की समस्या को ठीक करने के लिए संपूर्ण मार्गदर्शिका
यदि आप ऐसे परिदृश्य में आए हैं जहाँ सर्वर कुकी को सही ढंग से सेट करता है (ब्राउज़र प्रतिक्रिया में दिखाई देता है), लेकिन बाद के अनुरोधों में, ब्राउज़र उस कुकी को सर्वर पर वापस नहीं भेजता है, तो यह मार्गदर्शिका आपके लिए है। यह समस्या लगभग हमेशा तब होती है जब आपके प्रोजेक्ट का फ्रंटएंड और बैकएंड दो अलग-अलग डोमेन या पोर्ट पर होते हैं — उदाहरण के लिए, फ्रंटएंड app.example.com पर और API api.example.com पर।
ऐसा क्यों होता है?
आधुनिक ब्राउज़र CSRF हमलों और सत्र अपहरण को रोकने के लिए दो कठोर सुरक्षा नीतियाँ लागू करते हैं:
- CORS नीति: डिफ़ॉल्ट रूप से, ब्राउज़र क्रॉस-डोमेन अनुरोधों को क्रेडेंशियल्स (जैसे कुकीज़) शामिल करने की अनुमति नहीं देता है, जब तक कि सर्वर स्पष्ट रूप से इसकी अनुमति न दे।
- SameSite नीति: Chrome 80 से शुरू होकर, कुकीज़ को डिफ़ॉल्ट रूप से
SameSite=Laxव्यवहार के साथ माना जाता है, जिसका अर्थ है कि वे क्रॉस-डोमेन अनुरोधों में नहीं भेजी जाएंगी, जब तक कि उन्हें स्पष्ट रूप सेSameSite=Noneके साथ परिभाषित न किया गया हो।
महत्वपूर्ण बात यह है कि इस समस्या को हल करने के लिए, क्लाइंट और सर्वर दोनों पक्षों को सही ढंग से कॉन्फ़िगर किया जाना चाहिए। केवल एक पक्ष को संशोधित करना पर्याप्त नहीं है।
चरण 1: सही सर्वर कॉन्फ़िगरेशन
सर्वर पक्ष पर तीन स्वर्णिम नियम
नियम 1 — क्रेडेंशियल्स सक्षम करें: सर्वर प्रतिक्रिया हेडर में निम्न मान शामिल होना चाहिए:
Access-Control-Allow-Credentials: trueनियम 2 — वाइल्डकार्ड का उपयोग न करें: जब क्रेडेंशियल्स सक्षम होते हैं, तो आप Access-Control-Allow-Origin हेडर में * वाइल्डकार्ड वर्ण का उपयोग नहीं कर सकते। आपको फ्रंटएंड का सटीक पूर्ण डोमेन पता निर्दिष्ट करना होगा:
Access-Control-Allow-Origin: https://app.example.comनियम 3 — कुकी विशेषताएँ: कुकी को दो विशेषताओं के साथ सेट किया जाना चाहिए: SameSite=None और Secure। इन दो विशेषताओं के बिना, ब्राउज़र कुकी को संग्रहीत करेगा लेकिन क्रॉस-डोमेन अनुरोधों में इसे कभी नहीं भेजेगा।
Node.js (Express) में नमूना कोड
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'https://app.example.com', // सटीक फ्रंटएंड डोमेन, बिना /
credentials: true
}));
app.post('/login', (req, res) => {
res.cookie('session_token', 'abc123', {
httpOnly: true, // कुकी तक JavaScript पहुँच को रोकता है
secure: true, // केवल HTTPS के माध्यम से भेजा जाए
sameSite: 'none', // क्रॉस-ओरिजिन अनुरोधों में भेजने की अनुमति देता है
maxAge: 24 * 60 * 60 * 1000
});
res.json({ message: 'लॉगिन सफल रहा' });
});
PHP में नमूना कोड
<?php
// सटीक फ्रंटएंड डोमेन निर्दिष्ट करें, * नहीं
header("Access-Control-Allow-Origin: https://app.example.com");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
// Preflight अनुरोध का उत्तर दें
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
http_response_code(204);
exit;
}
// आवश्यक विशेषताओं के साथ कुकी सेट करना
setcookie('session_token', 'abc123', [
'expires' => time() + 86400,
'path' => '/',
'secure' => true, // आवश्यक
'httponly' => true,
'samesite' => 'None' // क्रॉस-ओरिजिन के लिए आवश्यक
]);
नोट: यदि आप Laravel का उपयोग कर रहे हैं, तो config/cors.php फ़ाइल में supports_credentials को true पर सेट करें और फ्रंटएंड डोमेन को allowed_origins सरणी में जोड़ें।
चरण 2: सही क्लाइंट (फ्रंटएंड) कॉन्फ़िगरेशन
पूर्ण सर्वर कॉन्फ़िगरेशन के साथ भी, ब्राउज़र तब तक कुकीज़ नहीं भेजेगा जब तक कि आप क्लाइंट पक्ष पर स्पष्ट रूप से घोषित नहीं करते कि यह अनुरोध "क्रेडेंशियल्स के साथ" है।
Fetch API का उपयोग करना
fetch('https://api.example.com/user/profile', {
method: 'GET',
credentials: 'include' // यह पंक्ति समस्या को हल करने की कुंजी है
})
.then(res => res.json())
.then(data => console.log(data));
Axios का उपयोग करना
// किसी विशिष्ट अनुरोध के लिए
axios.get('https://api.example.com/user/profile', {
withCredentials: true
});
// या पूरे प्रोजेक्ट के लिए वैश्विक रूप से
axios.defaults.withCredentials = true;
समस्या निवारण चेकलिस्ट
यदि उपरोक्त को लागू करने के बाद भी समस्या बनी रहती है, तो इन वस्तुओं को क्रम में जाँचें:
- ✅ क्या दोनों पक्ष HTTPS पर हैं?
Secureविशेषता का अर्थ है कि कुकी केवल एन्क्रिप्टेड कनेक्शन पर काम करती है। यदि आपकी साइट HTTP पर है, तो ब्राउज़र कुकी को स्वीकार नहीं करेगा। (अपवाद:localhostपर विकास वातावरण) - ✅ क्या Origin पता सटीक है?
Access-Control-Allow-Originपता ब्राउज़र में दिखने वाले URL से बिल्कुल मेल खाना चाहिए। यहाँ तक किwwwमें अंतर या अंतिम स्लैश/भी विफलता का कारण बनेगा। - ✅ क्या OPTIONS अनुरोध सफल है? ब्राउज़र डेवलपर टूल्स के Network टैब में, Preflight अनुरोध (OPTIONS विधि के साथ) की जाँच करें। इस अनुरोध को 200 या 204 कोड और सही CORS हेडर के साथ उत्तर दिया जाना चाहिए।
- ✅ क्या कुकी संग्रहीत है? ब्राउज़र में, DevTools ← Application ← Cookies पर जाएँ और सुनिश्चित करें कि कुकी
SecureऔरSameSite=Noneविशेषताओं के साथ संग्रहीत है। - ✅ क्या आपके पास कोई प्रॉक्सी या मध्यवर्ती फ़ायरवॉल है? कभी-कभी Cloudflare या Nginx जैसे वेब सर्वर हेडर को फिर से लिखते हैं। उनके कॉन्फ़िगरेशन की भी जाँच करें।
सारांश
क्रॉस-डोमेन अनुरोधों में कुकीज़ भेजने के लिए तीन कारकों के समन्वय की आवश्यकता होती है: Access-Control-Allow-Credentials: true और सटीक Origin वाला सर्वर, SameSite=None; Secure विशेषताओं वाली कुकी, और credentials: 'include' या withCredentials: true सक्रिय करने वाला क्लाइंट। इन तीन बिंदुओं का पालन करने पर, समस्या पूरी तरह से हल हो जाएगी।
विश्वसनीय बुनियादी ढाँचा, डेवलपर्स के लिए मानसिक शांति
CORS का सही कार्यान्वयन और कुकी प्रबंधन कहानी का केवल एक हिस्सा है; आपका प्रोजेक्ट जिस बुनियादी ढाँचे पर चलता है, वह भी सेवा की स्थिरता और सुरक्षा में निर्णायक भूमिका निभाता है:
Radib Hosting — मुफ्त SSL और मानक हेडर कॉन्फ़िगरेशन के पूर्ण समर्थन के साथ हाई-स्पीड वेब होस्टिंग; आपके प्रोजेक्ट्स के फ्रंटएंड और बैकएंड को होस्ट करने के लिए एक आदर्श विकल्प।
Radib Virtual Server — यदि आपके प्रोजेक्ट को पूर्ण पहुँच, समर्पित संसाधनों और वेब सर्वर कॉन्फ़िगरेशन (Nginx/Apache) में स्वतंत्रता की आवश्यकता है, तो Radib के वर्चुअल सर्वर शक्तिशाली हार्डवेयर और स्थिर नेटवर्क के साथ पेशेवर API के लिए सबसे अच्छा विकल्प हैं।
Radib Debugging and Security Services — यदि आप जटिल CORS त्रुटियों, प्रमाणीकरण समस्याओं या सुरक्षा चुनौतियों से जूझ रहे हैं, तो Radib की तकनीकी टीम, वेब अनुप्रयोगों के समस्या निवारण और सुरक्षा में गहरे अनुभव के साथ, जड़ से समस्या को हल करने में आपकी सहायता के लिए यहाँ है।
