حل خطأ "التحكم في الوصول إلى حقل رأس الطلب غير مسموح به بواسطة Access-Control-Allow-Headers" خطأ

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

فهم CORS وطلبات الاختبار المبدئي

تنبع المشكلة من حقيقة أن المتصفحات ترسل طلب OPTIONS للاختبار المبدئي للطلبات المشتركة الأصل مع أنواع محتوى معينة. بشكل افتراضي، يرسل Angular البيانات باستخدام نوع محتوى التطبيق/json، مما يؤدي إلى تشغيل طلب الاختبار المبدئي هذا.

استجابة الخادم ورؤوسه

يجب أن يسمح الخادم صراحةً بالوصول إلى- رأس Control-Allow-Headers في استجابته لمنع الخطأ. بخلاف ذلك، سيقوم المتصفح بتفسير الاستجابة على أنها لا تسمح بأي رؤوس.

الحل: تعديل نوع المحتوى أو استجابة الخادم

لحل المشكلة، قم بتعديل العميل أو تكوين الخادم:

1. جانب العميل (Angular):

استبدل نوع المحتوى الافتراضي Angular إلى application/x-www-form-urlencoded، والذي لا يؤدي إلى تشغيل طلب الاختبار المبدئي:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

2. جانب الخادم:

بدلاً من ذلك، اسمح برأس Access-Control-Allow-Headers على الخادم. يجب تعيين رؤوس الاستجابة التالية:

• Access-Control-Allow-Origin: * أو الأصل المحدد (على سبيل المثال، https://example.com)
• Access-Control -Allow-Methods: GET، POST، PUT، DELETE، OPTIONS
• Access-Control-Allow-Headers: جميع الرؤوس التي يرسلها العميل في الطلب (على سبيل المثال، نوع المحتوى، التفويض)