toolsmoah

مختبر CORS

اختبار وتصحيح أخطاء سياسات مشاركة الموارد عبر الأصول (CORS) وطلبات API

إعدادات الطلب
قم بتكوين طلب API للاختبار
أمثلة الطلبات
جرب طلبات API المحددة مسبقاً
معلومات CORS
معلومات أساسية حول CORS

ما هو CORS؟ CORS (مشاركة الموارد عبر الأصول) هو آلية تسمح لمتصفحات الويب بإجراء طلبات عبر الأصول (مجال أو بروتوكول أو منفذ مختلف) من النصوص البرمجية التي تعمل في المتصفح.

عناوين CORS الرئيسية

  • Access-Control-Allow-Origin: يحدد الأصول المسموح لها بالوصول إلى المورد
  • Access-Control-Allow-Methods: يحدد طرق HTTP المسموحة
  • Access-Control-Allow-Headers: يحدد عناوين HTTP التي يمكن استخدامها
  • Access-Control-Allow-Credentials: يحدد ما إذا كان سيتم تضمين بيانات الاعتماد (ملفات تعريف الارتباط، مصادقة HTTP)

💡 حلول CORS

حلول جانب الخادم

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

حلول جانب العميل

1. استخدام خادم وكيل:

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP (GET فقط):

// حل محدود ولكنه بسيط
          fetch('api?callback=handleResponse')

🔧 تكوين CORS حسب البيئة

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

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

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

تكوين CORS حسب البيئة

سيناريوهات الاختبار

  • • طلب بسيط: اختبار سلوك CORS الأساسي مع طلبات GET
  • • طلب التحقق المسبق: اختبار طلبات التحقق المسبق مع طرق PUT/DELETE
  • • عناوين مخصصة: اختبار الطلبات مع عنوان Authorization
  • • بيانات الاعتماد: اختبار الطلبات مع ملفات تعريف الارتباط
  • • معالجة الأخطاء: اختبار سيناريوهات الفشل

اعتبارات الأمان

  • • كن حذراً مع استخدام رمز الكل (*) بسبب المخاطر الأمنية
  • • مبدأ أقل امتياز: السماح فقط للأصول والطرق الضرورية
  • • قيود بيانات الاعتماد: السماح فقط لأصول محددة عند تضمين بيانات الاعتماد
  • • مراجعة منتظمة: راجع وحدث سياسات CORS بشكل دوري

نصائح تصحيح أخطاء CORS

أدوات مطور المتصفح

  • • تحقق من طلبات OPTIONS في علامة تبويب الشبكة
  • • ابحث عن رسائل خطأ CORS في وحدة التحكم
  • • تحقق من عناوين CORS في عناوين الاستجابة

أدوات مفيدة

  • • مختبر CORS (هذه الأداة)
  • • Postman (لاختبار API)
  • • أمر curl (للاختبار المباشر للخادم)
    مختبر CORS