html - 连接到 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-origin HTTP header 。

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

access-control-allow-origin: *

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

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

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

S3 配置

How to add CORS Documentation

CORS Configuration Documentation

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>https://www.your-domain.com</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

Lambda@Edge 函数

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

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

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

exports.handler = async (event, context) => {
    const request = event.Records[0].cf.request;
    const response = event.Records[0].cf.response;

    // Add logic here
    let cors = "something";

    response.headers['access-control-allow-origin'] = [{ key: 'Access-Control-Allow-Origin', value: cors }];

    return response;
};

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

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