تم توضيح CORS كيفية تشغيل أخطاء التداخل بين المواقع دون أن تفقد عقلك

لقد قمت بطلب تحميل. يظهر في علامة الشبكة أن الطلب تم إرساله. ولكن في لوحة التحكم تظهر جدار من الأحمر: تم منع الوصول إلى طلب التحميل من 'https://api.example.com' من مصدر 'https://yourapp.com' وفقًا لسياسة CORS.

قبل التعمق في التفسيرات - إليك المسار السريع للتشخيص. افتح أدوات التسليم → علامة الشبكة → ابحث عن الطلب المُنفَّذ بفشل → انظر إلى أوامر الرد. إذا لم ترَ Access-Control-Allow-Originفإن الخادم لا يرسل أعمدة CORS. هذه هي الحل. باقي هذه المقالة تشرح بالضبط ما يجب إرساله وما السبب.

ما هو CORS بالفعل

CORS - تبادل الموارد عبر المواقع المميزة - يُفرض من قبل المتصفح، وليس من جانب الخادم. لا يمنع خدمة API طلبات التبادل عبر المواقع. يمنع المتصفح، نيابة عن المستخدمين، من تلقي بيانات حسابك المصرفي. evil.com يقوم المتصفح بفحص: "هل الرد من هذه الخدمة يخبرني بأنه مسموح له بقراءة هذه المواقع؟" إذا لم يكن كذلك، يُرفض الرد - حتى لو تم معالجة الطلب من قبل الخادم وتم إرسال 200. لن يعلم الخادم سبب رفض المتصفح للطلب.

هذا مهم عند التدقيق: الخطأ يظهر دائمًا من جانب العميل. يجب على الخادم أن يخبر المتصفح "نعم، هذه المواقع مسموحة". وهذا ما تقوم به أعمدة الرد الخاصة بـ CORS.

الطلبات البسيطة مقابل طلبات التحقق

لا تُعامل جميع طلبات التبادل عبر المواقع بنفس الطريقة. يميز المتصفح نوعين.

الطلبات البسيطة

هي طلبات GET أو POST مع أطر عادية أو مُعدة بتنسيق النموذج، مع مجموعة صغيرة من الرؤوس المسموحة. يرسل المتصفحها مباشرة ويتحقق من الرد للحصول على الطلبات المسبقة Access-Control-Allow-Origin.

تُرسل أولًا عندما لا تتوافق طلباتك مع هذه الشروط - على سبيل المثال، عندما ترسل أو تضمن رأس مخصص مثل PUT أو DELETEأو ترسل بيانات التسجيل. يُرسل المتصفح طلبًا تحقق تلقائيًا إلى نفس الرابط قبل طلبك. إذا لم يرد الخادم على هذا Authorization أو Content-Type: application/jsonبأوامر CORS الصحيحة، لن يُرسل طلبك أبدًا. OPTIONS إذا رأيت طلبات OPTIONS في علامة الشبكة تُرجع 404 أو 405، فهذا هو السبب وراء فشل طلباتك. يجب على الخادم التعامل مع

لكل مسار يقبل حركة التبادل عبر المواقع. OPTIONS الأوامر التي تهم OPTIONS لتحقيق تثبيت أعمدة CORS بشكل صحيح، يجب فهم ما يتحكم به كل رأس من الرد:

— أي المواقع التي يمكنها قراءة الرد. إما موقع محدد (

) أو

• Access-Control-Allow-Origin لأي موقع.https://yourapp.com— أي طرق HTTP مسموحة (مثلاً، * — أي الرؤوس التي يُسمح بارسالها من قبل المتصفح (مثلاً،
• Access-Control-Allow-Methods — ما إذا كان يمكن إرسال ملفات التسجيل أو رؤوس التسجيل مع الطلب. يجب أن تكون GET, POST, PUT, DELETE, OPTIONS).
• Access-Control-Allow-Headers محددة. Authorization, Content-Type).
• Access-Control-Allow-Credentials — كم عدد الثواني التي يُفترض أن يُخزن فيها المتصفح الرد المسبق. true مفارقة الرمز
• Access-Control-Max-Age استخدام

أسرع طريقة لفتح باب API - لكنه ينهار عندما تُضاف بيانات التسجيل. عندما

مطلوبة، يتم رفض الرمز من قبل المتصفح. يجب تحديد الموقع بدقة: Access-Control-Allow-Origin: * إذا كان لديك مواقع مسموحة متعددة، فاقرأ رأس طلب Access-Control-Allow-Credentials: true وأعد تكراره بشكل شرطي - لا تدمجها.

# This will fail with credentials:
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

# This works:
Access-Control-Allow-Origin: https://yourapp.com
Access-Control-Allow-Credentials: true

أخطاء شائعة في CORS وما تعنيه Origin يوضح رسالة الخطأ عادة ما ينقصها. إليك ملخصًا سريعًا:

رسالة الخطأ

ما تعنيه

كيفية التدبير	لا يوجد رأس 'Access-Control-Allow-Origin'	أرسل الخادم أعمدة CORS
إلى الرد	قيمة رأس 'Access-Control-Allow-Origin' … لا تتطابق مع المصدر المُقدَّم	إضافة Access-Control-Allow-Origin مطابقة المصدر - أرسل الخادم مصدر خاطئ أو رمز عالمي مع بيانات التسجيل
أعد تكرار رأس طلب المصدر بشكل شرطي؛ احذف الرمز العالمي عند استخدام بيانات التسجيل	طريقة PUT غير مسموحة من خلال Access-Control-Allow-Methods	الطريقة HTTP غير مدرجة في رأس الطرق المسموحة
أضف الطريقة المفقودة إلى	رأس الطلب 'Authorization' غير مسموح من خلال Access-Control-Allow-Headers	الرأس المخصص مفقود من القائمة المسموحة Access-Control-Allow-Methods
أضف الرأس إلى	رد على طلب التحقق لا يمر بفحص التحكم	أرسل طلب OPTIONS بحالة خاطئة أو بدون رؤوس Access-Control-Allow-Headers
أعد التعامل مع طلب OPTIONS بشكل محدد؛ أرسل 200/204 مع الرؤوس الصحيحة	البيانات التسجيلية غير مدعومة إذا كان رأس CORS 'Access-Control-Allow-Origin' هو '*'	استخدام الرمز العالمي مع وضع التسجيل
استبدل	بمصدر محدد؛ أضف	كيفية تكوين CORS في Express، FastAPI، و Nginx * Express (Node.js) Access-Control-Allow-Credentials: true

FastAPI (Python)

Nginx

const cors = require('cors');

app.use(cors({
  origin: 'https://yourapp.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
  maxAge: 86400
}));

// Handle preflight for all routes
app.options('*', cors());

لاحظ نمط Nginx: تحتاج إلى

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://yourapp.com"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

في كلا القسم

location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'https://yourapp.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 86400;
        add_header 'Content-Length' 0;
        return 204;
    }

    add_header 'Access-Control-Allow-Origin' 'https://yourapp.com';
    add_header 'Access-Control-Allow-Credentials' 'true';

    proxy_pass http://backend;
}

والقسم الرئيسي. لا تنتقل أعمدة الرؤوس المحددة داخل add_header إلى القسم الخارجي. OPTIONS قائمة تدقيقك if عندما تواجه خطأ CORS، اعمل على التحقق من هذا بالترتيب:

اقرأ الرسالة الكاملة للخطأ

- تخبرك بالضبط ما هو السبب.

1. تحقق من علامة الشبكة - ابحث عن أعمدة الرد الحقيقية، وليس ما تعتقد أنك قمت بتكوينه.
2. تحقق من طلب OPTIONS - إذا فشل أو لم يظهر، فأنه لا يتعامل مع التحقق.
3. تأكد من أن المصدر مطابق تمامًا - تأكد من أن المسافات النهائية، HTTP مقابل HTTPS، والأرقام المميزة مهمة.
4. أزل الرمز العالمي إذا كنت تستخدم بيانات التسجيل - فهي متعارضة.
5. تأكد من أن الرؤوس لم تُزال من قبل بروكسي - قد تُزال أو تُغيّر بروكسيات مثل Nginx وCDN.
6. مفارقة سهلة التفريط: إذا كان API يقع وراء بروكسي عكسي أو CDN، فقد يضيف طبقة بروكسي رأس يتعارض مع ما يُرسله الخادم. عندما تظهر رؤوس من هذا النوع في رد واحد، يرفض المتصفح الرد كاملاً. تأكد من الرؤوس الحقيقية عند مستوى الشبكة - لا تنظر فقط إلى ما يُرسله برمجتك.

مفارقة أخرى: بعض الإصدارات تربط أعمدة CORS فقط بمسارات تتطابق مع موجه معين. إذا كنت تواجه 404 أو مسار غير مسجل، قد لا يُنفذ وسيتم رؤية خطأ "لا يوجد رأس" حتى لو كانت إعداداتك صحيحة. اجرب مسارًا صحيحًا أولًا. Access-Control-Allow-Origin إذا كنت بحاجة إلى إنشاء أعمدة CORS بالضبط التي يجب أن تُرسل من جانب الخادم، يُمكنك استخدام

مُصنف أعمدة CORS IO Tools

يتيح لك تكوين المصدر، الطرق، وبيانات التسجيل، ويوفر لك الرد الصحيح للإدخال في إعدادات الخادم. ملاحظة حول الأمان CORS ليست آلية لحماية API. تعيين

لا يجعل API علنيًا من حيث التهديدات - لا يتأثر بطلبات curl أو Postman أو الاتصال بين الخوادم. فقط الطلبات من المتصفح باستخدام JavaScript. إذا كانت API تحتاج إلى تأمين، فضعها على مستوى API باستخدام توكينات أو جلسات. لا تتعلق أعمدة CORS بتحكم وصول حقيقي.

بمعلومية هذا السياق، يمكنك اتخاذ قرارات منطقية حول إعدادك لـ CORS بدلًا من إغلاق كل شيء من خوف من الأمان أو فتح كل شيء دون فهم التنازلات. Access-Control-Allow-Origin: * تم توضيح CORS: كيف تُعالج أخطاء التبادل عبر المواقع دون فقدان عقلك 2

تم توضيح CORS: كيف تُعالج أخطاء التبادل عبر المواقع دون فقدان عقلك 1

قد يعجبك أيضاً