☰

AWS S3、CloudFront、Web 字体 CORS 错误

tag-icon • tag-icon nginx amazon-web-services amazon-s3 cdn amazon-cloudfront
AWS S3、CloudFront、Web 字体 CORS 错误

我刚刚将两个网站从之前的 CDN 迁移到 CloudFront。第一个网站运行良好，但我使用 DigitalOcean 中的相同快照创建了第二个网站，结果如下

访问字体'http://CLOUDFRONT_HOSTNAME.cloudfront.net/wp-content/themes/Newspaper/images/icons/newspaper.woff?14' 来自起源 'http://www.example.com' 已被 CORS 策略阻止：所请求的资源上不存在 'Access-Control-Allow-Origin' 标头。Origin'http://www.example.com' 因此不允许访问。

我已经尝试了在线提供的所有可能的解决方案，例如在 nginx 中添加标头。

location ~* \.(ttf|ttc|otf|eot|woff|svg|font.css)$ {
    add_header Access-Control-Allow-Origin *;
}

然后在 S3 中更新隐私

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

各个网站（包括其他 serverfault 和 stackoverflow 解决方案）中的大多数解决方案都是这样的。我还使 CloudFront 中的字体文件无效，但没有成功 :(

有人能指导我可能是什么问题吗？我已经通过 WP 中的 W3 Total Cache 插件连接了 CloudFront。

更新

1. 白名单标头

白名单标头

2. 使文件无效

使文件无效

  1. 请求和响应

请求与响应

提前致谢

阿里夫

答案1

您确定您正在发送带有字体请求的Authorization标题吗？GET

如果没有，请在您的 S3 CORS 策略中更改

<AllowedHeader>Authorization</AllowedHeader>

到

<AllowedHeader>*</AllowedHeader>。

这个小姑娘已经困扰了我一个月了。

答案2

我今天正在寻找这个问题，但无法找到适合我的情况的任何可行答案。

我正在使用 wordpress 并使用基于 s3 bucket 的 origin push cdn 和 amazon cloudfront。但是字体文件给出了 CORS 错误。

错误说：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://–domain–.cloudfront.net/wp-content/themes/Extra/fonts/ET-Extra.ttf. (Reason: CORS header ‘Access-Control_Allow-Origin’ missing).

解决方案是从 s3 bucket 设置 CORS 权限。但不是默认权限。我将它们更改为：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://www.domain-here.com</AllowedOrigin>
<AllowedOrigin>https://www.domain-here.com</AllowedOrigin>
<AllowedOrigin>http://domain-here.com</AllowedOrigin>
<AllowedOrigin>https://domain-here.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
</CORSRule>
</CORSConfiguration>

确保将此处的域名更改为您自己的域名。

此外，如果需要的话，不要忘记清除缓存/使出现问题的文件无效。

您也可以查看本教程以获取指导：https://nabtron.com/fix-access-control-allow-origin-missing/

我希望它有帮助。

答案3

在 AWS 控制台 - CloudFront - 分发编辑行为中，在 fordward 标头中设置白名单并从白名单标头中添加 Origin。

答案4

@Ariful Haque 请将以下代码添加到您的 .htaccess 文件中。它会对您有所帮助。

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

相关内容