ServBay में वेबसाइट के लिए CORS (क्रॉस-ओरिजिन रिसोर्स शेयरिंग) सेट करें

आधुनिक वेब विकास में, फ्रंटएंड एप्लिकेशन (आमतौर पर एक डोमेन पर चलते हैं) को अक्सर बैकएंड API या अन्य सेवाओं (जो किसी और डोमेन या पोर्ट पर हो सकती हैं) तक पहुंचने की आवश्यकता होती है। ब्राउज़र की सेम-ओरिजिन नीति सुरक्षा के चलते ऐसी क्रॉस-ओरिजिन रिक्वेस्ट को डिफ़ॉल्ट रूप से रोक देती है। क्रॉस-ओरिजिन रिसोर्स शेयरिंग (CORS) एक स्टैंडर्ड मैकेनिज्म है, जिससे सर्वर यह घोषित कर सकता है कि कौन से ओरिजिन इसकी रिसोर्सेस को एक्सेस कर सकते हैं, जिससे सुरक्षित क्रॉस-ओरिजिन इंटरैक्शन संभव होता है।

यह लेख आपको बताएगा कि कैसे आप ServBay के लोकल वेब विकास वातावरण में, ServBay के UI के माध्यम से अपनी वेबसाइट के लिए आसानी से CORS को सक्षम और कॉन्फ़िगर कर सकते हैं।

CORS क्या है?

क्रॉस-ओरिजिन रिसोर्स शेयरिंग (CORS) एक HTTP हेडर आधारित मैकेनिज्म है, जिससे सर्वर अपने ओरिजिन के अलावा किन अन्य ओरिजिन्स (डोमेन, प्रोटोकॉल या पोर्ट) को रिसोर्स लोड करने की अनुमति देता है, यह निर्धारित करता है। जब कोई वेबपेज अपने ओरिजिन से अलग ओरिजिन से रिसोर्स मांगता है, तब ब्राउज़र "क्रॉस-ओरिजिन HTTP रिक्वेस्ट" करता है। सेम-ओरिजिन नीति के कारण, ब्राउज़र डिफ़ॉल्ट रूप से ऐसी रिक्वेस्ट को रोक देता है। CORS सर्वर और ब्राउज़र के बीच कम्युनिकेशन का तरीका देता है ताकि वे तय कर सकें कि क्रॉस-ओरिजिन रिक्वेस्ट सुरक्षित है या नहीं।

डेवलपर्स को CORS क्यों कॉन्फ़िगर करना चाहिए?

जब आप फ्रंटएंड और बैकएंड को अलग-अलग बना रहे हों (जैसे, फ्रंटएंड app.servbay.demo पर और बैकएंड API api.servbay.demo पर चले), या आपको किसी थर्ड-पार्टी API को कॉल करना हो, तो ब्राउज़र की सेम-ओरिजिन नीति उस क्रॉस-ओरिजिन रिक्वेस्ट को ब्लॉक कर देगी। CORS कॉन्फ़िगर करने का उद्देश्य ब्राउज़र को बताना है कि सर्वर आपके फ्रंटएंड ओरिजिन से आने वाली रिक्वेस्ट स्वीकार कर सकता है, जिससे सेम-ओरिजिन नीति के कारण आने वाली परेशानी दूर हो जाती है।

CORS के मुख्य HTTP रिस्पॉन्स हेडर को समझें

जब सर्वर क्रॉस-ओरिजिन रिक्वेस्ट का जवाब देता है, तो वह कुछ खास Access-Control-* HTTP रिस्पॉन्स हेडर जोड़ता है। क्लाइंट ब्राउज़र इन हेडर से यह तय करता है कि क्या रिक्वेस्ट की अनुमति है या नहीं। नीचे ServBay में आप जो मुख्य CORS पैरामीटर कॉन्फ़िगर कर सकते हैं (जो इन्हीं HTTP हेडरों से संबंधित हैं), उनकी जानकारी दी जा रही है:

1. Access-Control-Allow-Origin

   • भूमिका: यह सबसे महत्वपूर्ण CORS हेडर है, जो यह बताता है कि कौन सा डोमेन/ओरिजिन इस रिसोर्स को एक्सेस कर सकता है।
   • मूल्य:
     • *: मतलब कि किसी भी डोमेन से रिक्वेस्ट स्वीकार की जाएगी। जरूरी सूचना: इसे प्रोडक्शन में इस्तेमाल करना सुरक्षित नहीं है, क्योंकि इससे किसी भी वेबसाइट को आपकी रिसोर्सेस तक पहुंच मिल जाती है।
     • https://servbay.demo: सिर्फ इसी खास ओरिजिन से रिक्वेस्ट एक्सेप्ट होंगी।
     • https://servbay.demo https://api.servbay.demo: कई खास ओरिजिन सपोर्ट करने के लिए, स्पेस से अलग करें।
   • ध्यान दें: अगर क्रॉस-ओरिजिन रिक्वेस्ट में Cookie या HTTP प्रमाणन जानकारी हो (यानि Access-Control-Allow-Credentials: true सेट है), तो Access-Control-Allow-Origin को कभी भी * पर सेट न करें, बल्कि कोई खास ओरिजिन ही दें।

2. Access-Control-Allow-Methods

   • भूमिका: यह हेडर वे HTTP मेथड्स (जैसे GET, POST, PUT, DELETE, OPTIONS) को बताएगा जो क्रॉस-ओरिजिन रिक्वेस्ट में इस्तेमाल किए जा सकते हैं।
   • मूल्य: जैसे: GET, POST, PUT, DELETE, OPTIONS। एक से अधिक मेथड के लिए कॉमा का उपयोग करें।
   • ध्यान दें: "नॉन-सिम्पल रिक्वेस्ट" (जैसे PUT या DELETE या कस्टम हेडर वाले रिक्वेस्ट) के लिए ब्राउज़र पहले OPTIONS मेथड के साथ प्रीफ्लाइट (Preflight) रिक्वेस्ट भेजेगा। सर्वर को इसका सही उत्तर Access-Control-Allow-Methods हेडर सहित देना होगा। इसलिए आमतौर पर यहां OPTIONS मेथड जरूरी है।

3. Access-Control-Allow-Headers

   • भूमिका: इसमें वे कस्टम HTTP हेडर शामिल हैं, जिन्हें क्रॉस-ओरिजिन रिक्वेस्ट में भेजने की अनुमति है।
   • मूल्य: जैसे: Content-Type, Authorization, X-Requested-With। एक से अधिक हेडर के लिए कॉमा का उपयोग करें।
   • ध्यान दें: यदि आपके फ्रंटएंड में डिफ़ॉल्ट सिम्पल हेडर (Accept, Accept-Language, Content-Language, और Content-Type जब इसका मान application/x-www-form-urlencoded, multipart/form-data, या text/plain हो) के अलावा अन्य हेडर इस्तेमाल हो रहे हैं, तो ब्राउज़र प्रीफ्लाइट रिक्वेस्ट भेजेगा और आपको यहां उन कस्टम हेडर को जरूर बताना होगा जिनकी अनुमति चाहिए।

4. Access-Control-Allow-Credentials

   • भूमिका: यह तय करता है कि क्रॉस-ओरिजिन रिक्वेस्ट यूजर क्रेडेंशियल्स (जैसे, Cookie, क्लाइंट SSL सर्टिफिकेट, या HTTP ऑथेन्टिकेशन) के साथ जा सकती है या नहीं।
   • मूल्य: true या false।
   • ध्यान दें: यदि यह true है, तो ऊपर बताए अनुसार Access-Control-Allow-Origin की वैल्यू कभी भी * न हो। साथ ही, क्लाइंट-साइड (ब्राउज़र के जावास्क्रिप्ट कोड में) भी यह फीचर enable करना जरूरी है (जैसे, xhr.withCredentials = true या fetch(url, { credentials: 'include' }))।

ServBay में CORS enable और कॉन्फ़िगर करना

ServBay एक सरल, ग्राफिकल इंटरफेस देता है जिसमें प्रत्येक वेबसाइट के लिए स्वतंत्र रूप से CORS सेटिंग्स कॉन्फ़िगर की जा सकती हैं। कदम दर कदम तरीका:

1. ServBay खोलें और वेबसाइट लिस्ट देखें: ServBay ऐप शुरू करें। मेन इंटरफेस के बाएं नेविगेशन बार में "वेबसाइट" विकल्प पर क्लिक करें। आपको अपने लोकल सिस्टम में बनी वेबसाइट्स की सूची दिखाई देगी।

2. CORS कॉन्फ़िगर करने वाली वेबसाइट चुनें: लिस्ट में से उस वेबसाइट को चुनें जिसके लिए आप CORS ऑन और सेटअप करना चाहते हैं। वेबसाइट के नाम पर क्लिक करें और उसकी डिटेल्ड सेटिंग्स स्क्रीन पर जाएं।

3. CORS सेटिंग्स सेक्शन खोजें और सक्रिय करें: वेबसाइट सेटिंग्स पेज के बीच में "CORS" सेक्शन तक नीचे स्क्रॉल करें। डिफ़ॉल्ट रूप से ServBay में CORS बंद रहता है। सेक्शन के पास वाले स्लाइडर/स्विच को "ऑफ" से "ऑन" पर करें। ऑन करते ही निचले इनपुट क्षेत्र editable हो जाएंगे।

4. Access-Control-Allow-Origin कॉन्फ़िगर करें: "Access-Control-Allow-Origin" इनपुट बॉक्स में उन एक या अधिक ओरिजिन्स को लिखें, जिनकी आपको इस वेबसाइट की रिसोर्सेस एक्सेस करने की अनुमति देनी है। मल्टीपल ओरिजिन के लिए उन्हें स्पेस से अलग करें, जैसे: https://frontend.servbay.demo https://anotherapp.servbay.demo। प्रोडक्शन में * न इस्तेमाल करें।

5. Access-Control-Allow-Methods कॉन्फ़िगर करें: "Access-Control-Allow-Methods" इनपुट बॉक्स में उन HTTP मेथड्स की लिस्ट दें जिन्हें अनुमति देनी है। मेथड्स को कॉमा से अलग करें, जैसे: GET, POST, PUT, DELETE, OPTIONS। सभी जरूरी मेथड्स और आमतौर पर OPTIONS जरूर शामिल करें।

6. Access-Control-Allow-Headers कॉन्फ़िगर करें: "Access-Control-Allow-Headers" इनपुट बॉक्स में उन कस्टम HTTP हेडर्स की लिस्ट दें जिन्हें आप अनुमति देना चाहते हैं। हेडर को कॉमा से अलग करें, जैसे: Content-Type, Authorization, X-Custom-Header। सिर्फ वही हेडर शामिल करें जिन्हें आपकी एप्लिकेशन भेजती है।

7. Access-Control-Allow-Credentials (ऑप्शनल) कॉन्फ़िगर करें: अगर आपको क्रॉस-ओरिजिन रिक्वेस्ट के साथ Cookie या HTTP प्रमाणन जानकारी भेजने की ज़रूरत है, तो "Allow-Credentials" के पास के स्लाइडर को ऑन करें। ध्यान दें: जब यह विकल्प चालू हो, तो step 4 में Access-Control-Allow-Origin कभी भी * न बनाएं।

8. अपना कॉन्फ़िगरेशन सेव करें: सारी सेटिंग्स पूरी करने के बाद पेज के नीचे दाईं ओर "सेव" बटन दबाएं। ServBay बाकी काम खुद करेगा और आपके वेब सर्वर (जैसे Caddy या Nginx) की कॉन्फ़िग को दोस्ताना तरीके से अपडेट कर देगा, आपको कुछ रीस्टार्ट करने की जरूरत नहीं।

कॉन्फ़िगरेशन उदाहरण

नीचे दी गई इमेज दिखाती है कि "ServBay Demo Website" नाम की वेबसाइट के लिए ServBay में CORS कैसे कॉन्फ़िगर किया गया है:

ऊपर चित्र में दिए गए सेटअप के अनुसार:

• Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: एक्टिव (true)

इसका अर्थ है कि केवल https://frontend.servbay.demo और https://api.servbay.demo इन दोनों ओरिजिन से आ रही रिक्वेस्ट को "ServBay Demo Website" एक्सेप्ट करेगी। ये रिक्वेस्ट GET, POST, PUT, DELETE, OPTIONS मेथड्स से आ सकती हैं, इनमें Content-Type और Authorization हेडर हो सकते हैं, और Cookie जैसी क्रेडेंशियल्स भेजी जा सकती हैं।

ध्यान देने योग्य बातें और सर्वोत्तम प्रथाएँ

• सुरक्षा प्राथमिकता: डिवेलपमेंट या टेस्टिंग में Access-Control-Allow-Origin: * आसान है, लेकिन प्रोडक्शन में सिर्फ जरूरी ओरिजिन्स को अनुमति दें ताकि सुरक्षा बेहतर बनी रहे।
• प्रीफ्लाइट रिक्वेस्ट: OPTIONS मेथड से आने वाली प्रीफ्लाइट रिक्वेस्ट को समझना और उसका सही जवाब देना, CORS समस्याओं का निदान करने के लिए ज़रूरी है। सुनिश्चित करें कि ServBay (या आपके वेब सर्वर) का सेटअप इसको सही तरीके से संभालता है।
• ब्राउज़र कैश: ब्राउज़र CORS पॉलिसी को कैश कर सकता है। यदि नई सेटिंग्स के बाद समस्या बनी रहे तो ब्राउज़र का कैश साफ करें या इनकॉग्निटो/गुप्त विंडो में टेस्ट करें।
• ऐप-लेवल CORS: कुछ वेब फ्रेमवर्क (जैसे Laravel, Express.js, Spring Boot आदि) ऐप-कोड स्तर पर भी CORS सेटिंग्स देते हैं। ServBay का CORS सर्वर लेवल पर लागू होता है और आमतौर पर ऐप-लेवल से पहले रन होता है। जटिल मामलों में दोनों कोड और सर्वर सेटिंग्स में तालमेल जरूरी हो सकता है।
• डिबगिंग टूल्स: ब्राउज़र डेवलपर टूल्स (F12) के Network टैब में क्रॉस-ओरिजिन रिक्वेस्ट और उनके HTTP हेडर की जांच कीजिए। इससे CORS सेटअप संबंधी समस्याओं की सही वजह पता चलती है।

अक्सर पूछे जाने वाले सवाल (FAQ)

प्रश्न: मैंने स्टेप्स फॉलो करके CORS कॉन्फ़िगर किया, फिर भी मेरी क्रॉस-ओरिजिन रिक्वेस्ट क्यों फेल हो रही है?

उत्तर: निम्नलिखित तरीके से जांचें:

1. ब्राउज़र कंसोल व नेटवर्क टैब देखें: कंसोल में आमतौर पर CORS संबंधी त्रुटि संदेश मिलेंगे और नेटवर्क टैब में सभी हेडर नजर आएंगे। देखें कि रिस्पॉन्स में क्या सही Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers हेडर और सही वैल्यू है?
2. ओरिजिन चेक करें: क्या Access-Control-Allow-Origin में वही ओरिजिन (प्रोटोकॉल, डोमेन, पोर्ट) है जिससे आपके फ्रंटएंड की रिक्वेस्ट आ रही है?
3. मेथड एवं हेडर चेक करें: क्या Access-Control-Allow-Methods में आपके इस्तेमाल किए गए HTTP मेथड शामिल हैं? क्या Access-Control-Allow-Headers में आपके अपने उपयोग किए गए सभी कस्टम हेडर शामिल हैं?
4. क्रेडेंशियल प्रॉब्लम: यदि क्रेडेंशियल्स (Cookie आदि) भेजनी हैं, तो ServBay में Allow-Credentials ऑन है और Access-Control-Allow-Origin * नहीं है? साथ ही, क्या आपकी क्लाइंट-कोड में ऐसी रिक्वेस्ट सेटिंग्स सक्रिय हैं (withCredentials = true आदि)?
5. प्रीफ्लाइट रिक्वेस्ट: नॉन-सिम्पल रिक्वेस्ट के मामले में, ब्राउज़र द्वारा भेजी जा रही OPTIONS प्रीफ्लाइट रिक्वेस्ट तथा उसके रिस्पॉन्स में सही CORS हेडर हैं या नहीं, देखें।
6. ServBay सेव: क्या सर्वे मे सेटिंग बदलने के बाद "सेव" बटन जरुर दबाया?

प्रश्न: क्या मैं सभी वेबसाइट्स के लिए एक ग्लोबल CORS नीति सेट कर सकता हूँ?

उत्तर: ServBay में हर वेबसाइट के लिए अलग-अलग CORS सेटिंग्स कॉन्फ़िगर की जाती हैं, जिससे फ्लैक्सिबिलिटी और सुरक्षा मिलती है। वर्तमान में ServBay UI में ग्लोबल CORS नीति सेट करने का विकल्प नहीं है। अगर आपको कई वेबसाइट्स पर समान CORS नीति चाहिए, तो हर वेबसाइट में जाकर सेटिंग करनी होगी।

प्रश्न: ServBay कैसे CORS सेटिंग लागू करता है?

उत्तर: ServBay बैकएंड में Caddy या Nginx वेब सर्वर इस्तेमाल करता है। आप ServBay UI में जितनी भी CORS सेटिंग्स करेंगे, वे Caddyfile या Nginx कॉन्फ़िगरेशन डायरेक्टिव्ज़ में अपने आप बदल जाती हैं। ServBay इनके फाइल्स और सर्वर reload की जिम्मेदारी संभालता है, आपको मैन्युअल कुछ नहीं करना पड़ता।

निष्कर्ष

ServBay के सहज यूजर इंटरफेस से आप अपने लोकल विकास वातावरण की वेबसाइट्स के लिए आसानी से CORS को सक्षम और कॉन्फ़िगर कर सकते हैं और क्रॉस-ओरिजिन समस्याओं का समाधान कर सकते हैं। Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers व Access-Control-Allow-Credentials जैसे अहम हेडर्स को सही समझना और सेट करना, आपकी वेबसाइट की सुरक्षा एवं सुचारू क्रॉस-ओरिजिन रिक्वेस्ट्स के लिए महत्वपूर्ण है। ऊपर दिए गाइड और टिप्स को अपनाकर आप अपनी लोकल वेब विकास प्रक्रिया को और बेहतर बना सकते हैं।