注: この問題は、Firefox がクロス ドメイン サーバーからフォントをダウンロードできないことに関連しています。
ソース: mozilla
Gecko では、HTTP アクセス制御を使用してこの制限を緩和しない限り、Web フォントには同じドメイン制限が適用されます (フォント ファイルは、フォント ファイルを使用するページと同じドメインにある必要があります)。注: TrueType、OpenType、および WOFF フォントには MIME タイプが定義されていないため、指定されたファイルの MIME タイプは考慮されません。
Amazon クラウドフロントからアセットを取得する Rails アプリケーションがあります。次に、CloudFront は s3 バケットからアセットをフェッチします。クラウドフロントの URL からアセットがフェッチされるように、production.rb で asset_host を定義しました。
config.action_controller.asset_host = "//d582x5cj7qfaa.cloudfront.net"
私は別のドメイン、つまりクラウドフロントからアセットを提供しているためです。firefox の場合、フォントをダウンロードできません。これに遭遇し、回答と同じロジックを適用しましたが、それでもフォントをダウンロードできませんでした。これの背後にある理由は、同じクラウドフロント URL を使用してフォントにアクセスする複数のドメイン (例: abc.almaconnect.com、xyz.almaconnect.com) があるため、クラウドフロント サーバーは最初の要求で送信されたサーバー ヘッダーをキャッシュするためです。次回リクエストするドメインが異なっても、同じヘッダーを返すようにします。次に、このリンクに出くわしました。これにより、キャッシュヘッダーの問題が解決されます。つまり、URLとともにクエリ文字列を渡すと、正しく機能するはずです
私の質問は、URL を介して動的に query_string を追加するにはどうすればよいですか? 同じアプリケーションが複数のドメインで使用されるため、リアルタイム メソッドでクエリ文字列を追加する必要があります。それ、どうやったら出来るの？
参考までに: これは、Amazon s3 バケットで使用した CORS 構成です。これは、アセットを提供するためにクラウドフロント URL によって使用されました。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*.almaconnect.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
これは、URLに query_string を追加した場合と追加しない場合で何が起こるかを知るようになった方法です:
curl -i -H "Origin: https://niet.almaconnect.com" https://d582x5cj7qfaa.cloudfront.net/assets/AlmaConnect-Icons-d059ef02df0837a693877324e7fe1e84.ttf?https_niet.almaconnect.com
query_string を追加せずに、オリジンが異なる同じ curl リクエストを使用すると、返されるレスポンスには、最初のリクエストで使用されたオリジン ヘッダーが含まれます。