0
私のアプリケーションで使用しているブートストラップglyphiconsは、safariでのみ動作し、chromeやfirefoxでは動作しません。 glyphiconsのイメージを以下に示します。グリフコンがfirefoxとchromeで動作しない
私はすべての静的なコンテンツをホストするCloudFrontのを使用しています。 前にも同様の質問が掲載されていて、CDNの設定が開発上問題ないと指摘していました。私がCDNに行った変更を以下に示します。
答えは、本番環境のホスト名をホワイトリストに記載しています。私は "配布"、 "配布設定"、 "動作"タブをクリックし、 "編集"をクリックしました。 「Forward Headers」を「None（キャッシングを改善する）」から「ホワイトリスト」に変更しました。「ホワイトリストヘッダー」セクションが表示され、「ホスト」がリストに追加されました。これはホスト名を「ホワイトリストに登録」できる唯一の場所でした。私はこれを正しく行ったかどうかは確かではありません。
まだクロムでは機能しませんでした。私は、クロムが問題だったかどうかを調べるためにfirefoxを使ってみましたが、firefoxでもうまくいきませんでした。それはサファリでのみ動作します。
私もconfig.serve_static_files = trueを本番環境に設定しました。
私が言及したように、私は前に同様の質問を掲載しましたが解決策はありませんでした。どんな助けも高く評価されます。ありがとう！
クロームコンソールを表示した後、次のエラーが表示されます。
https://d24b01zeuxnthb.cloudfront.net/assets/bootstrap/glyphicons-halflings…gular-bd18efd3efd70fec8ad09611a20cdbf99440b2c1d40085c29be036f891d65358.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
https://d24b01zeuxnthb.cloudfront.net/assets/sprites/[email protected]29b3010a7c584eb3ed186be.png Failed to load resource: the server responded with a status of 404 (Not Found)
Font from origin 'https://xxxxxxxxx.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://scorecliq.herokuapp.com' is therefore not allowed access.
Chromeデベロッパーツールのコンソールで、リソースの読み込みに関連するエラーがないかどうか確認しましたか？ – Conti
2つの異なる問題があるかもしれませんが、AWS Cloudfront Forward Header Caching Conflictsをすぐに見てみることをお勧めします。 http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-rtmp Dev環境でCDNへの参照をホワイトリストする必要がある可能性もあります、 同じように。私は常に、レンダリングされたブラウザのバージョンのコードを見て、ファイルへの参照が正しいことを確認します。 –
@MarceloMartins、私はクロームコンソールの表示から得たエラーで私の質問を更新します。 – kpaul