لحل مشكلات CORS، تحتاج إلى إضافة الرؤوس المناسبة إما في خادم الويب (مثل Apache أو Nginx)، أو في الواجهة الخلفية (مثل Django، Go، أو Node.js) أو في أطر عمل الواجهة الأمامية (مثل React أو Next.js). فيما يلي الخطوات لكل منصة:

1. خوادم الويب

أباتشي

يمكنك تكوين رؤوس CORS في ملفات تكوين Apache (مثل .htaccess، أو httpd.conf، أو apache2.conf)، أو ضمن تكوين مضيف افتراضي محدد.

أضف الأسطر التالية لتمكين 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، يمكنك تكوين رؤوس 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، يمكنك إضافة رؤوس CORS باستخدام حزمة Django-cors-headers.

1. تثبيت الحزمة:

   pip install django-cors-headers

1. أضف "corsheaders" إلى INSTALLED_APPS في إعداداتك.py:

   INSTALLED_APPS = [
       ...
       'corsheaders',
   ]

1. أضف برنامج CORS الوسيط إلى برنامجك الوسيط:

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

1. قم بتعيين الأصول المسموح بها في settings.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']

جو (جولانج)

في Go، يمكنك التعامل مع CORS يدويًا في معالج HTTP أو استخدام برنامج وسيط مثل 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 (اكسبرس)

في Express (Node.js)، يمكنك استخدام البرنامج الوسيط cors.

1. تثبيت حزمة كورس:

   npm install cors

1. أضف البرنامج الوسيط في تطبيق Express الخاص بك:

   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. أطر الواجهة الأمامية

التفاعل

في React، يتم التعامل مع CORS من خلال الواجهة الخلفية، ولكن أثناء التطوير، يمكنك وكيل طلبات واجهة برمجة التطبيقات (API) لتجنب مشكلات CORS.

1. إضافة وكيل إلى package.json:

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

سيعمل هذا على توكيل الطلبات أثناء التطوير إلى خادم الواجهة الخلفية الخاص بك الذي يعمل على المنفذ 5000.

بالنسبة للإنتاج، يجب أن تتعامل الواجهة الخلفية مع CORS. إذا لزم الأمر، استخدم أداة مثل http-proxy-middleware لمزيد من التحكم.

Next.js

في Next.js، يمكنك تكوين CORS في مسارات API.

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',
                       },
                   ],
               },
           ];
       },
   };

ملخص مكان إضافة الرؤوس:

• خوادم الويب (Apache، Nginx): تكوين في ملفات تكوين الخادم (على سبيل المثال، .htaccess، nginx.conf).
• الأطر الخلفية:
  • جانغو: استخدم رؤوس جانغو-كورس.
  • Go: أضف الرؤوس يدويًا أو استخدم برنامجًا وسيطًا مثل rs/cors.
  • Node.js (Express): استخدم البرنامج الوسيط لـ cors.
• الواجهة الأمامية: في التطوير، استخدم إعدادات الوكيل (مثل وكيل React أو رؤوس Next.js المخصصة) لتجنب مشكلات CORS، ولكن تعامل دائمًا مع CORS في الواجهة الخلفية في الإنتاج.