CloudFront 提供的 CSS 文件未呈现
这是一个奇怪的问题，但我认为我在某个地方做了一些愚蠢的事情，最终导致了目前的情况。
当尝试从 CloudFront 提供静态文件（图像、css 和 js）时，它们似乎无法正确呈现。例如，我的样式表之一可以在这里找到： http://d21uvxjmc903qz.cloudfront.net/stylesheets/hf.4fabc9c719f8 .css，但它似乎没有“应用”到正如我所期望的 DOM。 （例如，在 Firebug 中的 Chrome 或 Firefox 中的开发人员工具中查看相关样式未应用于
查看响应标头，它看起来像 Content -Type 设置正确，所以我几乎没有关于
下一步该看什么的建议？
This is an odd issue, but I assume I've done something boneheaded somewhere along the line to end up with this current situation.
When trying to serve static files (images, css & js) from CloudFront, they don't seem to be rendering properly. For example, one of my stylesheets is available here: http://d21uvxjmc903qz.cloudfront.net/stylesheets/hf.4fabc9c719f8.css, but it doesn't seem to be "applied" to the DOM as I would expect. (For example, looking in developer tools in Chrome or Firefox in Firebug the relevant styles aren't applied to the <header> element.
Looking at the response headers, it looks like the Content-Type is set properly, so I'm pretty much out of ideas.
Any suggestions on where to look next?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
问题可能是 S3 存储桶中的内容类型错误。我遇到了同样的问题，更改内容类型解决了问题。我将下面的内容从
text/plain更改为text/css，然后样式呈现正确。The problem is likely the wrong content-type in the S3 bucket. I had the same trouble, and changing the content-type fixed the issue. I changed the below from
text/plaintotext/cssand then the styles rendered correctly.对我来说，链接不能是 http，而必须是 https://..
其修改为以下内容时，它对我有用
当我在 html 文件中将
：
希望有帮助。
For me the link couldn't be http but had to be https://..
It worked for me when i modified this
in the html file to this:
<link rel="stylesheet" href="https://s3.amazonaws.com/yourFolder/w3.css">hope that helps.
我知道这是一个非常老的问题，但我找到了一个适合我解决同样问题的解决方案：在CloudFront控制台中，我为
/*创建了一个新的“无效”，据我所知，它强制请求静态文件转到源而不是 CloudFront 缓存，这解决了我的 css 渲染问题，因为我最近更改了项目中 css 文件的位置。I know this is a super old question but I found a solution that worked for me with the same problem: in the CloudFront console, I created a new 'invalidation' for
/*which as I understand it forces requests for the static files to go to the origin instead of the CloudFront cache, and this fixed my css rendering issues as I had recently changed the location of css files in my project.刚刚从 cloudfront 提供的 CSS 文件出现问题，我们认为该文件未正确提供。问题最终是背景的 url 值中存在未转义的单引号。
将
'替换为%27后，CSS 问题就得到了解决。Just had an issue with a CSS file served from cloudfront that we thought was not served correctly. The issue ended up being an unescaped single quote inside of a backgroud's url value.
Once we replaced
'with%27, the CSS issues were fixed.我正在使用 Hugo 来渲染我的网站。我发现我需要在
baseURL的值中指定HTTPS协议，而不仅仅是路径。例如，在文件 config.toml 中：
或在命令行上，
向 @pascati 致谢并 +1，他引导我找到了这个 Hugo 解决方案。
I am using Hugo to render my website. I found that I need to specify the HTTPS protocol in the value of
baseURL, not just the path.For example, in file
config.toml:or on the command line,
A tip of the hat and +1 to @pascati, who led me to this Hugo solution.
我在使用 s3cmd 将本地文件与 S3 同步时遇到了这个问题。
s3cmd客户端对.css文件的 MIME 类型进行假设，并返回Content-Type: text/plain。我使用以下命令标志和
s3cmd修复了此问题：--no-mime-magic还有各种其他相关选项 - 请参阅 https://s3tools.org/usage 了解更多信息。
您可能需要先使 Cloudfront 边缘缓存失效（并从 S3 中删除文件，然后再次同步），然后才能看到此效果。
I ran into this problem when using
s3cmdto synchronise my local files with S3. Thes3cmdclient makes an assumption about the MIME type of the.cssfile and it returns withContent-Type: text/plain.I fixed this using the following command flag with
s3cmd:--no-mime-magicThere are various other associated options - see https://s3tools.org/usage for more info.
You may need to invalidate your Cloudfront edge cache (and remove the file from S3 then sync again) before you can see this take effect.