连接到 AWS 后字体真棒图标未加载

Question

我正在做一个开发网站的项目。 我为我的后端选择了 Django。 我已在 Amazon s3 存储桶上上传了我的 static 文件。 我所有的 CSS 文件和图像以及每个 static 文件都在加载，除了来自 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">

我看不到任何结果。 我网站的URL： 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 function 修改 header。

S3 配置

如何添加 CORS 文档

CORS 配置文档

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

朗达@Edge Function

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

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

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

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;
};

Once you have created the Lambda function you can add hook it into your CloudFront distribution by editing a behavior and adding your function to Lambda Function Associations as either "Viewer Response" or Origin Response".

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

Answer 2

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

这种配置非常适合我。 你可以试试。