从 CloudFront 到服务器的字体 CORS 问题

Question

我们仅针对 FONT 将 cloudfront 的 CORS 问题发送到我的站点。

访问来自“ http://example.com ”的“ http://d2v777xrj.cloudfront.net/assets/simple-line-icons/fonts/Simple-Line-Icons-ff94ad94c3a9d04bd2f80cb3c87dcccb.woff ”的字体已被阻止CORS 策略：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问源“ http://example.com ”。

Answer 1

尝试了一切但没有任何效果！但解决方案非常简单，只需两步解决方案即可。

1. 转到 S3 存储桶 -> 权限 -> 编辑：跨域资源共享 (CORS) -> 粘贴以下配置。在大多数其他文章中，他们都犯了错误的标题错误。您必须将“Origin”放入AllowedHeaders 中。

    [
        {
            "AllowedHeaders": [
                "Origin"
            ],
            "AllowedMethods": [
                "HEAD",
                "GET"
            ],
            "AllowedOrigins": [
                "http://www.yourdomain.com",
                "https://www.yourdomain.com",
                "https://yourdomain.com",
                "http://yourdomain.com"
            ],
            "ExposeHeaders": [],
            "MaxAgeSeconds": 3000
        }
    ]
   

2. 转到 Cloudfront->Behaviours->Default(*)->Edit Change, Cache and origin request settings to : Use Legacy cache settings Change, Cache Based on Selected Request Headers to : Whitelist 然后，将白名单标头添加到 : Origin [仅]

Answer 2

参考资料（在查看参考资料后，发现这些参考资料对我有用。我没有在 S3 存储桶上添加任何 CORS。只有 Cloudfront 访问 S3）[对于您的情况更改themes为assets]

https://deliciousbrains.com/wp-offload-media/doc/font-cors/

http://thelazylog.com/correct-configuration-to-fix-cors-issue-with-cloudfront/