连接到 AWS 后字体很棒的图标无法加载

Question

我正在做一个开发网站的项目。我选择 Django 作为我的后端。我已将静态文件上传到 Amazon s3 存储桶上。我所有的 CSS 文件和图像以及每个静态文件都在加载，除了 font-awesome 中的图标。我尝试使用他们的 CDN。然而还没有结果。

  <link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

我看不到任何结果。我的网站网址： https: //fine-arts-club.herokuapp.com/

Answer 1

这通常是由于 CORS 处理配置不当引起的。

打开浏览器开发者工具。如果出现错误提示 Font Awesome 由于被 CORS 策略阻止而无法加载，这就是原因。

要解决这个问题，您需要设置access-control-allow-originHTTP 标头。

将值设置为*将允许任何域。

access-control-allow-origin: *

您可以将标头值设置为特定域。对于为特定站点托管的文件，这通常是最佳选择。

access-control-allow-origin: https://www.your-domain.com

有两种方法可以设置 CORS 标头。您可以在 S3 存储桶中创建策略，也可以使用 Lambda@Edge 函数修改标头。

S3配置

如何添加CORS文档

CORS配置文档

access-control-allow-origin: *

Lambda@Edge 函数

您还可以access-control-allow-origin使用 Lambda@Edge 函数添加 HTTP 标头。对于您的需要来说，这可能有点过分了，但如果有更复杂的设置，它会很有帮助。

为此，您需要在 US-East-1 创建 Lambda 函数。

您将使用的代码示例如下......

access-control-allow-origin: https://www.your-domain.com

创建 Lambda 函数后，您可以通过编辑行为并将函数作为“查看者响应”或“源响应”添加到Lambda 函数关联，将其添加到您的 CloudFront 分配中。

我建议几乎所有情况都使用 S3 方法。