خطأ 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

Do you have the DISCOURSE_ENABLE_CORS in your app.yml as suggests the description?

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

Not sure – is there a way to check? (I’m on a hosted instance of Discourse, so I can’t look at the config files directly.)

Edit: I emailed our hosting provider to see if that’s the problem.

5

Update: my hosting provider confirms that DISCOURSE_ENABLE_CORS is set to TRUE.

So, I’m still baffled.

7

I just tried this, just like you described, on a site with a CDN setup and it worked. So, I think this might be limited to your site.

I think the DISCOURSE_ENABLE_CORS setting is the inverse of what you want. Adding domains to that setting will allow requests from those domains access to your Discourse domain, not the other way around.

What you want is to allow requests from your Discourse domain to get access to the file on your CDN. I think your CDN is blocking those requests. You can confirm that by running something like this in a terminal window, after you change the values of course.

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

If everything is setup correctly, you should see something like this in the response headers

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