glyphicons不能在firefox和chrome中工作

我在我的应用程序中使用的自举图形只适用于safari而不适用于chrome或firefox。下图给出了图标的图像。glyphicons不能在firefox和chrome中工作

我使用CloudFront的托管所有的静态内容。我之前发布了一个类似的问题，答案指出CDN上的配置可能是问题，因为它在开发上工作得很好。我对CDN所做的修改如下。

提到的白名单生产环境主机名称的答案。我点击了“分配”，“分配设置”和“行为”选项卡，然后点击“编辑”。我将“Forward Headers”从“None（Improving Caching）”改为“Whitelist”。将出现“Whitelist Headers”部分，并将“host”添加到列表中。这是我唯一可以将主机名“白名单”的地方。我不完全确定我是否正确做到了这一点。

它仍然没有在铬上工作。我尝试使用Firefox浏览器是否是Chrome的问题，但它不适用于Firefox。它只适用于safari。

我也在生产环境中设置了config.serve_static_files = true。

正如我所提到的，我之前发布了类似的问题，但没有解决方案。任何帮助将不胜感激。谢谢！

查看Chrome控制台后，我看到以下错误。

https://d24b01zeuxnthb.cloudfront.net/assets/bootstrap/glyphicons-halflings…gular-bd18efd3efd70fec8ad09611a20cdbf99440b2c1d40085c29be036f891d65358.ttf Failed to load resource: the server responded with a status of 404 (Not Found) 
https://d24b01zeuxnthb.cloudfront.net/assets/sprites/[email protected]29b3010a7c584eb3ed186be.png Failed to load resource: the server responded with a status of 404 (Not Found) 

Font from origin 'https://xxxxxxxxx.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://scorecliq.herokuapp.com' is therefore not allowed access.

来源

2016-07-06 kpaul

您是否检查Chrome开发人员工具控制台以查看是否存在与资源负载相关的错误？ – Conti

您可能有两个不同的问题，但我建议您快速浏览AWS Cloudfront Forward Header缓存冲突： http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-rtmp 您也有可能需要在开发环境中将CDN引用白名单，以及。我总是看着呈现的浏览器版本中的代码，以确保对该文件的引用是正确的。 –

@MarceloMartins，我将更新我的问题，并查看我在查看Chrome控制台时遇到的错误。 – kpaul

我试过访问两个.TFF和我有一个404同样不会发生在巴纽。因此请检查以确保.tff文件已被提交到Prod。但是，这是由HTTPS跨域资源引用引起的问题，如果源将使用相同的TLD和野生SSL证书，则可以缓解该问题。如您所知，使用HTTPS资源的HTTP应用程序不会发生同样的情况。

尽管CDN可以方便地减少应用程序资源&加载时间，但它也有一些注意事项。在这种情况下，您需要放弃CDN以避免跨域问题并将glyphicons字体移动到项目中。这将解决您在任何环境中遇到的问题，只要所有文件均已正确提交并发布。

来源

2016-07-06 18:08:37

glyphicons不能在firefox和chrome中工作

回答

相关问题