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

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

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

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

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


person philipk    schedule 03.10.2011    source источник
comment
У вас есть ссылка на сайт, использующий его?   -  person John Keyes    schedule 03.10.2011
comment
Я предполагаю, что вы включили его в свой HTML правильным способом.   -  person Alex    schedule 03.10.2011
comment
Почти уверен, что я включаю его правильно, я использую Django, и единственное изменение — это URL-адрес, на который я ссылаюсь. (например, при подаче с моей локальной машины проблем нет, при подаче вне облачной среды это ведет себя странно.)   -  person philipk    schedule 07.10.2011
comment
К сожалению, у меня нет ссылки на сайт, использующий его, так как он был только на моей машине разработки. Я настрою тестовую машину с ним в ближайшие несколько дней. Спасибо!   -  person philipk    schedule 07.10.2011


Ответы (4)


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

введите здесь описание изображения

person TimDog    schedule 02.05.2012
comment
У меня была такая же проблема, и это исправило ее для меня. - person Andrew Gertig; 27.11.2012
comment
Спасибо, ТимДог! Решил проблему на 2 часа + для меня. Ты человек! - person ac360; 11.05.2015

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

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

в html файле к этому:

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

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

person pascati    schedule 24.11.2016

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

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}
person Cory Danielson    schedule 12.10.2015

Я использую Hugo для рендеринга своего сайта. Я обнаружил, что мне нужно указать протокол HTTPS в значении baseURL, а не только путь.

Например, в файле config.toml:

baseURL = https://example.com

или в командной строке,

hugo --baseURL https://example.com

Совет и +1 @pascati, который привел меня к этому решению Hugo.

person John McGehee    schedule 12.01.2020