Ошибка типа CSS MIME при обслуживании сайта из S3 через CloudFront
При посещении моего сайта customtimers.net я получаю следующую ошибку:
Refused to apply style from 'https://customtimers.net/styles.css' because its MIME type
('application/xml') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Однако CSS, похоже, работает на сайте нормально.
Я использую статический веб-сайт S3, обслуживаемый через CloudFront по протоколу HTTPS.
В S3:
- Тип файла CSS —
text/css. - Все файлы расположены в корневом каталоге, за исключением некоторых звуковых файлов.
Я использовал Angular для создания интерфейса, поэтому мой index.html почти такой же, как он генерируется по умолчанию:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Customizable Timers</title>
<base href = "/">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<meta http-equiv = "Content-Security-Policy" content = "upgrade-insecure-requests" />
<link rel = "icon" type = "image/x-icon" href = "favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
На файл css есть ссылка в app-root (в теле выше), а именно:
<!DOCTYPE html>
<html lang = "en" [attr.data-bs-theme] = "theme">
<head>
<meta charset = "utf-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name = "description" content = "A website where you can create customizable online timers." />
<meta name = "author" content = "Me!" />
<meta http-equiv = "Content-Security-Policy" content = "upgrade-insecure-requests" />
<title>Customizable Timers</title>
<!-- Font Awesome icons -->
<script src = "https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin = "anonymous"></script>
<!-- Google fonts-->
<link href = "https://fonts.googleapis.com/css?family=Montserrat:400,700" rel = "stylesheet" type = "text/css" />
<link href = "https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel = "stylesheet" type = "text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href = "/styles.css" rel = "stylesheet" />
</head>
<body id = "page-top">...more content...</body>
</html>
Мой angular.json файл:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"src/styles.css"
],
Таблица стилей взята из Bootstrap с некоторыми изменениями, если это имеет значение.
Я попробовал следующее:
- добавление таблицы стилей в
index.htmlвместоapp-rootи в дополнение к нему. - добавив
type = "text/css"к ссылке CSS. - Я убедился, что имя файла
styles.cssс буквой «s». - Таблица стилей не показывает ошибок в VS Code.
Я впервые развертываю сайт, поэтому не знаю, что делать дальше. Рад предоставить более подробную информацию.
Обновлять: Ниже приведены более подробные сведения о политике файлов и сегментов.
Разрешения на файл:
Я пробовал это как с utf-8, так и без него.
Политика сегментов прямо из CloudFront:
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipal",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::custom-timers-s3/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::<#####>:distribution/<bucket id>"
}
}
}
]
}
Ответы 2
Обновлено: я попытался сделать запрос к CSS-файлу вашего сайта и получил ответ об ошибке от Cloudfront в формате XML, так что там, где возникает ошибка MIME-типа application/xml. Еще раз проверьте разрешение политики файла и корзины.
В AWS S3 щелкните файл styles.css -> вкладку «Свойства», затем прокрутите до раздела «Метаданные».
Убедитесь, что ключ Content-Type файла равен text/css; charset=utf-8.
Политика сегмента — это политика CloudFront без изменений. Вот суть: «Разрешить» «cloudfront.amazonaws.com» для «s3:GetObject» из «идентификатора корзины». Никаких других разрешений.
Единственное, что я могу вспомнить, это имя файла в S3 — styles.<random string>.css. Это из результатов сборки Angular. Это есть во всех файлах, поэтому я не думал, что это на что-то повлияет, поскольку другие файлы обслуживаются нормально. При переименовании в styles.css он доступен напрямую по URL-адресу как CSS, но все равно загружается под старым именем; Я предполагаю, потому что он создан с более длинным именем файла.
Кажется, моя идея сработала. Я переименовал вывод сборки в styles.css, а затем вошел и отредактировал файл сборки index.html, чтобы использовать styles.css вместо имени файла со вставленной случайной строкой. Хотя мне бы хотелось знать, что здесь происходит. Это похоже на обходной путь, а не на хорошее решение.
В итоге я нашел обходной путь, но до сих пор не понимаю, почему возникла проблема.
Сначала создайте выходные файлы:
ng build --configuration production
Некоторые файлы сборки выходят из Angular со случайными строками между именем и типом файла:
name.<random string>.type.
Эти файлы имеют соответствующие ссылки в выводе index.html.
Решением является переименование файла стилей в styles.css без случайной строки.
Затем в выводе index.html переименуйте ссылки на styles.css.
Затем загрузите файлы на S3.
Я дважды проверил тип файла и добавил
charset=utf-8. Без изменений.