CORS समस्याओं को हल करने के लिए, आपको वेब सर्वर (जैसे Apache या Nginx), बैकएंड (जैसे Django, Go, या Node.js) में उपयुक्त हेडर जोड़ने होंगे। , या फ्रंटएंड फ्रेमवर्क में (जैसे रिएक्ट या नेक्स्ट.जेएस)। प्रत्येक प्लेटफ़ॉर्म के लिए चरण नीचे दिए गए हैं:

1. वेब सर्वर

अपाचे

आप Apache की कॉन्फ़िगरेशन फ़ाइलों (जैसे .htaccess, httpd.conf, या apache2.conf) में या किसी विशिष्ट वर्चुअल होस्ट कॉन्फ़िगरेशन में CORS हेडर कॉन्फ़िगर कर सकते हैं।

CORS को सक्षम करने के लिए निम्नलिखित पंक्तियाँ जोड़ें:

    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"

• विशिष्ट डोमेन के लिए CORS लागू करने के लिए:

  Header set Access-Control-Allow-Origin "https://example.com"

• यदि क्रेडेंशियल आवश्यक हैं:

  Header set Access-Control-Allow-Credentials "true"

सुनिश्चित करें कि mod_headers मॉड्यूल सक्षम है। यदि नहीं, तो इसका उपयोग करके इसे सक्षम करें:

sudo a2enmod headers
sudo systemctl restart apache2

Nginx

Nginx में, आप CORS हेडर को nginx.conf में या एक विशिष्ट सर्वर ब्लॉक के भीतर कॉन्फ़िगर कर सकते हैं।

निम्न पंक्तियाँ जोड़ें:

server {
    location / {
        add_header Access-Control-Allow-Origin "*";
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
    }

    # Optional: Add for handling preflight OPTIONS requests
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin "*";
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
        add_header Access-Control-Allow-Headers "Authorization, Content-Type";
        return 204;
    }
}

• यदि क्रेडेंशियल आवश्यक हैं:

  add_header Access-Control-Allow-Credentials "true";

फिर Nginx को पुनरारंभ करें:

sudo systemctl restart nginx

2. बैकएंड फ्रेमवर्क

Django

Django में, आप django-cors-headers पैकेज का उपयोग करके CORS हेडर जोड़ सकते हैं।

1. पैकेज स्थापित करें:

   pip install django-cors-headers

1. अपनी सेटिंग्स.py में INSTALLED_APPS में 'कॉर्शेडर्स' जोड़ें:

   INSTALLED_APPS = [
       ...
       'corsheaders',
   ]

1. CORS मिडलवेयर को अपने मिडलवेयर में जोड़ें:

   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
       ...
   ]

1. सेटिंग्स.py में अनुमत मूल सेट करें:

   CORS_ALLOWED_ORIGINS = [
       "https://example.com",
   ]

• सभी मूलों की अनुमति देने के लिए:

  CORS_ALLOW_ALL_ORIGINS = True

• यदि क्रेडेंशियल आवश्यक हैं:

  CORS_ALLOW_CREDENTIALS = True

• विशिष्ट शीर्षलेखों या विधियों को अनुमति देने के लिए:

  CORS_ALLOW_HEADERS = ['Authorization', 'Content-Type']
  CORS_ALLOW_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']

जाओ (गोलांग)

गो में, आप HTTP हैंडलर में CORS को मैन्युअल रूप से संभाल सकते हैं या rs/cors जैसे मिडलवेयर का उपयोग कर सकते हैं।

rs/cors मिडलवेयर का उपयोग करना:

1. पैकेज स्थापित करें:

   go get github.com/rs/cors

1. इसे अपने एप्लिकेशन में उपयोग करें:

   package main

   import (
       "net/http"
       "github.com/rs/cors"
   )

   func main() {
       mux := http.NewServeMux()

       // Example handler
       mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
           w.Write([]byte("Hello, World!"))
       })

       // CORS middleware
       handler := cors.New(cors.Options{
           AllowedOrigins:   []string{"https://example.com"}, // Or use * for all
           AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
           AllowedHeaders:   []string{"Authorization", "Content-Type"},
           AllowCredentials: true,
       }).Handler(mux)

       http.ListenAndServe(":8080", handler)
   }

Node.js (एक्सप्रेस)

एक्सप्रेस (नोड.जेएस) में, आप कॉर्स मिडलवेयर का उपयोग कर सकते हैं।

1. कॉर्स पैकेज स्थापित करें:

   npm install cors

1. अपने एक्सप्रेस ऐप में मिडलवेयर जोड़ें:

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

   // Enable CORS for all routes
   app.use(cors());

   // To allow specific origins
   app.use(cors({
       origin: 'https://example.com',
       methods: ['GET', 'POST', 'PUT', 'DELETE'],
       allowedHeaders: ['Authorization', 'Content-Type'],
       credentials: true
   }));

   // Example route
   app.get('/', (req, res) => {
       res.send('Hello World');
   });

   app.listen(3000, () => {
       console.log('Server running on port 3000');
   });

3. फ्रंटेंड फ्रेमवर्क

प्रतिक्रिया

रिएक्ट में, CORS को बैकएंड द्वारा नियंत्रित किया जाता है, लेकिन विकास के दौरान, आप CORS समस्याओं से बचने के लिए API अनुरोधों को प्रॉक्सी कर सकते हैं।

1. package.json में एक प्रॉक्सी जोड़ें:

   {
     "proxy": "http://localhost:5000"
   }

यह पोर्ट 5000 पर चल रहे आपके बैकएंड सर्वर पर विकास के दौरान प्रॉक्सी अनुरोध करेगा।

उत्पादन के लिए, बैकएंड को CORS को संभालना चाहिए। यदि आवश्यक हो, तो अधिक नियंत्रण के लिए http-प्रॉक्सी-मिडलवेयर जैसे टूल का उपयोग करें।

Next.js

नेक्स्ट.जेएस में, आप एपीआई मार्गों में सीओआरएस को कॉन्फ़िगर कर सकते हैं।

1. एपीआई मार्गों के लिए एक कस्टम मिडलवेयर बनाएं:

   export default function handler(req, res) {
       res.setHeader('Access-Control-Allow-Origin', '*'); // Allow all origins
       res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
       res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');

       if (req.method === 'OPTIONS') {
           // Handle preflight request
           res.status(200).end();
           return;
       }

       // Handle the actual request
       res.status(200).json({ message: 'Hello from Next.js' });
   }

1. next.config.js में, आप प्रतिक्रिया शीर्षलेखों को भी संशोधित कर सकते हैं:

   module.exports = {
       async headers() {
           return [
               {
                   source: '/(.*)', // Apply to all routes
                   headers: [
                       {
                           key: 'Access-Control-Allow-Origin',
                           value: '*', // Allow all origins
                       },
                       {
                           key: 'Access-Control-Allow-Methods',
                           value: 'GET, POST, PUT, DELETE, OPTIONS',
                       },
                       {
                           key: 'Access-Control-Allow-Headers',
                           value: 'Authorization, Content-Type',
                       },
                   ],
               },
           ];
       },
   };

हेडर कहां जोड़ें इसका सारांश:

• वेब सर्वर (अपाचे, Nginx): सर्वर कॉन्फ़िगरेशन फ़ाइलों में कॉन्फ़िगर करें (उदाहरण के लिए, .htaccess, nginx.conf)।
• बैकएंड फ्रेमवर्क:
  • Django: django-cors-headers का उपयोग करें।
  • जाएं: मैन्युअल रूप से हेडर जोड़ें या rs/cors जैसे मिडलवेयर का उपयोग करें।
  • Node.js (एक्सप्रेस): कॉर्स मिडलवेयर का उपयोग करें।
• फ्रंटएंड: विकास में, सीओआरएस समस्याओं से बचने के लिए प्रॉक्सी सेटअप (जैसे रिएक्ट की प्रॉक्सी या नेक्स्ट.जेएस कस्टम हेडर) का उपयोग करें, लेकिन उत्पादन में बैकएंड में हमेशा सीओआरएस को संभालें।