خطأ CORS عند محاولة تحميل خط مخصص

مطور
1

أحاول استخدام خط خاص في أحد مكونات السمة الخاصة بي. لقد اتبعت التعليمات في هذا المنشور:

إليك كود CSS الخاص بالمكون الخاص بي:

@font-face {
  font-family: 'northwood';
  font-style: regular;
  src: url($northwoodhigh) format('woff2');
}

.category-list tbody .category h3 a[href] {
	color: #ccc;
	font-family: 'northwood', cursive;
	font-size: 135%;
	word-spacing: 3px;
}

لقد أضفت عنوان URL الخاص بـ Cloudfront إلى إعدادات CORS على النحو التالي:

Image 2020-04-25 at 6.45.23 PM
Image 2020-04-25 at 6.45.23 PM600×143 18.7 KB

لكن الأمر لا يعمل — للأسف، أحصل على خطأ “Cross-origin request blocked” في وحدة التحكم عند تحميل صفحة تحتوي على هذا CSS:

7d26013f5bcde40cc8778378940e1e53_Image 2020-04-25 at 6.38.04 PM

(آسف على حجم الصورة الصغير جدًا). هل لدى أحدكم أي نصيحة؟ لقد علقت.

3

هل قمت بإضافة DISCOURSE_ENABLE_CORS في ملف app.yml كما هو مقترح في الوصف؟

إعجاب واحد (1)
4

غير متأكد — هل توجد طريقة للتحقق؟ (أنا أستخدم نسخة مستضافة من Discourse، لذا لا يمكنني فحص ملفات الإعدادات مباشرةً.)

تعديل: أرسلت بريدًا إلكترونيًا إلى مزود الاستضافة لدينا لمعرفة ما إذا كانت هذه هي المشكلة.

5

تحديث: يؤكد موفر الاستضافة الخاص بي أن DISCOURSE_ENABLE_CORS مضبوط على TRUE.

لذلك، لا يزال الأمر محيرًا لي.

7

لقد جربت ذلك للتو، تمامًا كما وصفت، على موقع مهيأ مع شبكة توصيل محتوى (CDN) وقد نجح الأمر. لذا، أعتقد أن المشكلة قد تكون محددة بموقعك أنت.

أظن أن الإعداد DISCOURSE_ENABLE_CORS هو عكس ما تريده. فإضافة نطاقات إلى هذا الإعداد سيمنح النطاقات المضافة حق الوصول إلى نطاق Discourse الخاص بك، وليس العكس.

ما تريده هو السماح لطلبات النطاق الخاص بـ Discourse بالحصول على الوصول إلى الملف الموجود على شبكة توصيل المحتوى (CDN). وأظن أن شبكة توصيل المحتوى (CDN) تمنع هذه الطلبات. يمكنك التأكد من ذلك بتشغيل أمر مشابه لهذا في نافذة طرفية، بعد تغيير القيم بالطبع.

curl -H "origin: YOUR_SITE_URL" -v "PATH_TO_THE_FONT_ON_YOUR_CDN"

إذا تم إعداد كل شيء بشكل صحيح، فستظهر لك في رؤوس الاستجابة (response headers) شيء مشابه لهذا:

Access-Control-Allow-Origin: *
إعجابَين (2)