通过CloudFront部署S3静态站点时的CSS MIME类型错误

访问站点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文件的MIME类型已设置为text/css，除部分音频文件外，所有文件均存放在根目录
• 前端实现：使用Angular开发，index.html为框架默认生成内容，CSS文件在app-root组件中引用；angular.json已配置对应样式文件，该样式表基于Bootstrap修改而来

已尝试的排查操作 #

• 在index.html中添加样式表引用（替代或追加到app-root的原有引用）
• 为CSS链接标签添加type="text/css"属性
• 确认文件名确实为styles.css
• 检查VS Code中样式表无语法错误
• 尝试开启/关闭utf-8编码配置
• 核对文件权限截图及CloudFront生成的Bucket策略

首次部署站点，不确定后续排查方向，寻求进一步解决思路。

内容的提问来源于stack exchange，提问作者IntrACate