bunny.net CDNでコードハイライト失敗

サイトでコードのハイライトが機能しないと誰かが苦情を言っていました。私も自分のサイトで問題を再現しました。問題は、CDNがCORSポリシーによってブロックされていることのようです。

image

CORSページの「CORSヘッダーを追加」設定にjsを追加することで問題を解決しました。

これが有効になっている場合、bunny.netはリスト内の拡張子を持つファイルへのすべてのリクエストにCORSヘッダー(Cross-Origin Resource Sharing)を自動的に追加します。

これは、他の誰かがbunny.net CDNで問題が発生した場合に文書化するため、また、私がこれを理解していることを確認するために投稿します。

「いいね!」 6

バニーには、CORSにJSを追加する設定があった(または、あった)と思いますか?私は(何らかの理由で)すべてのバニー.ネットリソースのCORSにJSを追加していますが、自分で追加した記憶はありません。比較的新しいサイトですか?

「いいね!」 4

最初にそれに気づいたサイトは、かなり前から(バニーを使い始めたのがいつだったか覚えていない)存在していました。

バニーが変更されたのか、それとも含まれているスクリプトの何かが変更されたのかはわかりません。

「いいね!」 2

これを顕著にした変更は、おそらく DEV: Modernise highlightjs loading (#24197) · discourse/discourse@0878dde · GitHub でしょう。これは highlightjs をネイティブな import() 経由で読み込むように切り替えたもので、CDN からの取得時に CORS ヘッダーが必要になります。

しかし、その変更以前でも、カスタムフォント(クロスオリジンリクエストにも CORS ヘッダーが必要)などで問題があった可能性が高いです。

理論上は、Discourse 自体が CDN レスポンスに CORS ヘッダーを追加するはずです。もし追加されていない場合、それは CDN が Host ヘッダーまたは X-Forwarded-Host ヘッダーに CDN ホスト名(つまりフォーラムホスト名ではない)を設定していないことを意味する可能性が高いです。

とはいえ、CDN 設定経由でヘッダーを追加することはおそらく同じことを達成できるでしょう :ok_hand:

「いいね!」 4

このトピックは、最後の返信から30日後に自動的にクローズされました。新しい返信は許可されていません。