فهم أخطاء CORS: "فشل الوصول إلى المجال الفرعي من المجال الرئيسي: لا يوجد" التحكم في الوصول - السماح بالأصل ""

مشاركة الموارد عبر الأصل (CORS) هي آلية تسمح للمجالات المختلفة بالتفاعل مع بعضها البعض. عندما يعمل خادم API على نطاق فرعي ويعمل تطبيق React على النطاق الرئيسي، يمكن أن تحدث أخطاء CORS، مثل "فشل الوصول إلى النطاق الفرعي من النطاق الرئيسي: لا يوجد خطأ 'Access-Control-Allow-Origin'".

التحقيق في المشكلة

فحص طلب الاختبار المبدئي في Chrome DevTools للتحقق من الاستجابات المخزنة مؤقتًا وطلبات الاختبار المبدئي. قم بتنفيذ طلب الاختبار المبدئي باستخدام أداة مثل الضفيرة، مع تذكر إضافة خيار -i لإخراج رؤوس الاستجابة.

تحليل الحالة

• الحالة 1: هذا يستخدم هذا النهج تكوين CORS الافتراضي، والذي يمكّن أصل حرف البدل. ومع ذلك، يكشف الاختبار أنه يعمل بشكل صحيح.
• الحالة 2 : تخصيص الأصول والأساليب والرؤوس المسموح بها أثبت أيضًا نجاحه.
• الحالة 3 : يعد التعامل مع رؤوس CORS يدويًا حلاً آخر قابلاً للتطبيق.

حل المشكلة المشكلة

التكوين الخاطئ في المجموعة المستهدفة لـ AWS Load Balancer (استنادًا إلى حل OP)

كان السبب الجذري لهذه المشكلة تحديدًا هو التكوين الخاطئ في المجموعة المستهدفة لـ AWS Load Balancer. تم ضبط بروتوكول المجموعة المستهدفة على HTTPS على الرغم من عدم توفير شهادات SSL المناسبة. أدى تصحيح البروتوكول إلى حل المشكلة.

نصائح التصحيح

• تعطيل التخزين المؤقت في Chrome DevTools لتجنب استجابات الاختبار المبدئي المخزنة مؤقتًا.
• أرسل طلبات الاختبار المبدئي مباشرةً إلى خدمتك للتخلص منها تداخل محتمل للوكيل.
• اطبع المخزن المؤقت للطلب (على سبيل المثال، باستخدام httputil.DumpRequest) لتصحيح الأخطاء الأغراض.