CSS-файлы, обслуживаемые CloudFront, не отображаются

Question

Это странная проблема, но я предполагаю, что где-то вдоль линии я что-то сделал, чтобы закончить с этой текущей ситуацией.

При попытке обслужить статические файлы (изображения, css & js) из CloudFront, они, кажется, не отрисовываются должным образом. Например, одна из моих таблиц стилей доступна здесь: http://d21uvxjmc903qz.cloudfront.net/stylesheets/hf.4fabc9c719f8.css,, но, похоже, она не «применяется» к DOM, как я ожидал. (Например, при просмотре инструментов разработчика в Chrome или Firefox в Firebug соответствующие стили не применяются к элементу <header>.

Глядя на заголовки ответа, похоже, что Content-Type настроен правильно, поэтому у меня почти нет идей.

Любые предложения о том, где искать дальше?

Answer 1

Возможно, проблема в неправильном типе контента в корзине S3.У меня была такая же проблема, и смена типа контента устранила проблему.Я изменил приведенное ниже значение с text/plain на text/css, а затем стили отображаются правильно.

Answer 2

Для меня ссылка не может быть http, но должна быть https: // .. Это сработало для меня, когда я изменил это

<link rel="stylesheet" href="w3.css">

в HTML-файл к этому:

<link rel="stylesheet" href="https://s3.amazonaws.com/yourFolder/w3.css">

надеюсь, что это поможет.

Answer 3

Только что возникла проблема с CSS-файлом, полученным из облачного фронта, который, по нашему мнению, был обработан неправильно. В итоге проблема заключалась в том, что в качестве значения URL-адреса backgroud использовалась одиночная кавычка.

background: url(//xxxxx.cloudfront.net/img/flags48/Cote%20d'Ivoire.png) no-repeat}

Как только мы заменили ' на %27, проблемы с CSS были исправлены.

background: url(//xxxxx.cloudfront.net/img/flags48/Cote%20d%27Ivoire.png) no-repeat}