JavaScript में CORS त्रुटियों को कैसे ठीक करें: एक संपूर्ण गाइड

CORS (Cross-Origin Resource Sharing) errors वेब एप्लिकेशन बनाते समय developers के सामने आने वाली सबसे आम निराशाओं में से एक हैं। यदि आपने वह डरावना संदेश No Access-Control-Allow-Origin header is p देखा है

CORS को समझना

CORS एक सुरक्षा सुविधा है जिसे ब्राउज़र द्वारा लागू किया जाता है ताकि दुर्भावनापूर्ण websites को विभिन्न domains पर संसाधनों तक पहुंचने से रोका जा सके। जब आपका JavaScript code किसी भिन्न origin से डेटा fetch करने का प्रयास करता है (d

समाधान 1: अपने Server को Configure करें

🎨 AI Generated: समाधान 1: अपने Server को Configure करें

सही समाधान यह है कि अपने server को उचित CORS headers शामिल करने के लिए configure करें। Express.js के लिए:

const cors = require( cors ); app.use(cors());

या manually headers जोड़ें:

res.setHeader( Access-Control-Allow-Origin , * ); res.setHeader( Access-Control-Allow-Methods , GET, POST, PUT, DELETE );

समाधान 2: एक Proxy का उपयोग करें

Development के दौरान, अपने package.json में एक proxy configure करें:

proxy : http://localhost:5000

या CORS प्रतिबंधों को बायपास करने के लिए एक development proxy server का उपयोग करें।

समाधान 3: JSONP (Legacy)

🎨 AI Generated: समाधान 3: JSONP (Legacy)

केवल GET requests के लिए, JSONP CORS को बायपास कर सकता है, हालांकि यह काफी हद तक पुराना और कम सुरक्षित है।

समाधान 4: Browser Extensions (केवल Development के लिए)

टेस्टिंग के लिए CORS ब्राउज़र extensions इंस्टॉल करें, लेकिन production में इन पर कभी भरोसा न करें।

Best Practices

🎨 AI Generated: Best Practices

• Wildcards (*) का उपयोग करने के बजाय सटीक origins निर्दिष्ट करें
• केवल आवश्यक HTTP methods की अनुमति दें
• Preflight OPTIONS requests को ठीक से handle करें
• Security implications को समझे बिना production में कभी भी CORS को disable न करें