カスタムフォントの読み込み時に発生するCORSエラー

開発
1

テーマコンポーネントの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;
}

Cloudfront の URL を CORS 設定に以下のように追加しました。

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

しかし動作しません。残念ながら、その CSS が含まれるページを読み込むと、コンソールで「Cross-origin request blocked」エラーが表示されてしまいます。

7d26013f5bcde40cc8778378940e1e53_Image 2020-04-25 at 6.38.04 PM

（画像が非常に小さくて申し訳ありません。）何かアドバイスはありませんか？行き詰まっています。

3

app.yml に説明にあるように DISCOURSE_ENABLE_CORS が設定されていますか？

「いいね！」 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"

設定が正しく行われていれば、レスポンスヘッダーに以下のような内容が表示されるはずです。

Access-Control-Allow-Origin: *
「いいね！」 2