连接到 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 标头。

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

access-control-allow-origin: *

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

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

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

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 标头。对于您需要的东西，这可能有点过头了，但如果有更复杂的设置，它会很有帮助。

为此，您需要在 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 函数关联 作为“查看器响应”或“源响应”，将其添加到 CloudFront 分配中。

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

Answer 2

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

此配置非常适合我。你可以试试看。