来自源的字体已被跨源资源共享策略阻止加载答案

【问题标题】：Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy来自源的字体已被跨源资源共享策略阻止加载
【发布时间】：2014-10-24 00:55:11
【问题描述】：

我在几个 Chrome 浏览器上收到以下错误，但不是全部。目前不完全确定问题所在。

来自“https://ABCDEFG.cloudfront.net”的字体已被跨域资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'https://sub.domain.com' 因此不允许访问。

我在 S3 上有以下 CORS 配置

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

请求

Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.com
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

来自 Cloudfront/S3 的所有其他请求都能正常工作，包括 JS 文件。

【问题讨论】：

我遇到了同样的问题...升级到 chrome 37.0.2062.94 后我开始注意到它
更新 CORS 配置后，我重命名了资产并设法使其正常工作。因此，要么 1）CORS 配置仅应用于文件创建（不更新），要么 2）CORS 配置缓存在 Cloudfront 中。如果其他人可以确认它也适用于他们，我会将其作为答案发布。
刚刚在 Chrome v. 37.0.2062.94 中注意到这一点，但不是早期版本。我在 S3 上根本没有 CORS 配置，所以这不应该发生，对吧？
@Ghopper21 您需要正确的 CORS 配置。在 Firefox 中进行测试，这会给你（可能）相同的结果。
@RichPeck - 通过将正确的 CORS 配置添加到 S3 来修复（或者如果从源代码自动创建 CDN，那么它会更复杂一些 - 您必须添加适当的标头，然后使您的缓存无效字体）... stackoverflow.com/questions/12229844/… 更多详细信息，请参阅下面的答案

标签： amazon-web-services amazon-s3 cors amazon-cloudfront

【解决方案1】：

聚会迟到了，但我刚刚遇到了这个问题，并在我的 AWS 存储桶配置（权限选项卡）中使用以下设置解决了这个问题。请求的格式不再是 XML，而是 JSON：

[
    {
        "AllowedHeaders": [
            "Content-*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://www.yourdomain.com",
            "https://yourdomain.com"
        ],
        "ExposeHeaders": []
    }
]

【讨论】：

【解决方案2】：

对于 AWS S3，将跨域资源共享 (CORS) 设置为以下对我有用：

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

【讨论】：

"AllowedOrigins": ["*"]
@andreas，如果您关心其他网站是否加载此内容，这不只是一个问题吗？还是我遗漏了什么更危险的东西？
我不知道。但这确实是一种不好的做法，如果其他人使用您的图像，可能会导致您付出意想不到的代价。如果您的 S3 存储桶前面有 CloudFront，这可能会变得很昂贵。

【解决方案3】：

如果你想允许特定域的文件夹中的所有字体，那么你可以使用这个：

  <location path="assets/font">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="http://localhost:3000" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

assets/font 是所有字体所在的位置，http://localhost:3000 是您要允许的位置。

【讨论】：

【解决方案4】：

如果您使用 node.js 作为服务器，只需在您的中添加使用源...

喜欢这个

  app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

我们需要对来源的响应

【讨论】：

【解决方案5】：

heroku 的工作解决方案在这里http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html （引用如下）：

如果您在 Heroku 中运行 Rails 应用程序并使用 Cloudfront 作为 CDN，则可以执行以下操作。它在 Ruby 2.1 + Rails 4、Heroku Cedar 堆栈上进行了测试。

将 CORS HTTP 标头 (Access-Control-*) 添加到字体资源

将 gem font_assets 添加到 Gemfile 。
bundle install
将config.font_assets.origin = '*' 添加到config/application.rb 。如果您想要更精细的控制，您可以将不同的原始值添加到不同的环境，例如，config/config/environments/production.rb
curl -I http://localhost:3000/assets/your-custom-font.ttf
将代码推送到 Heroku。

配置 Cloudfront 以转发 CORS HTTP 标头

在 Cloudfront 中，选择您的发行版，在“行为”选项卡下，选择并编辑控制字体交付的条目（对于大多数简单的 Rails 应用程序，您在此处只有 1 个条目）。将转发标题从“无”更改为“Whilelist”。并将以下标头添加到白名单：

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age

保存即可！

警告：我发现有时即使 CORS 错误消失，Firefox 也不会刷新字体。在这种情况下，请不断刷新页面几次，以使 Firefox 相信您真的下定决心。

【讨论】：

请避免仅链接的答案。如果您可以将链接文章中的相关 sn-ps 复制到您的答案中，这将很有帮助。谢谢。

【解决方案6】：

对于那些使用带有 web.config 文件的 Microsoft 产品的用户：

将此与您的 web.config 合并。

要允许在任何域上将 value="domain" 替换为 value="*"

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webserver>
    <httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="domain" />
      </customheaders>
    </httpprotocol>
  </system.webserver>
</configuration>

如果您没有编辑 web.config 的权限，请在您的服务器端代码中添加此行。

Response.AppendHeader("Access-Control-Allow-Origin", "domain");

【讨论】：

值得一票记住我们 Windows 用户。
我正在使用 asp.net core，如何将它添加到 appsettings.json 文件中？

【解决方案7】：

我遇到了同样的问题，这个链接为我提供了解决方案：

http://www.holovaty.com/writing/cors-ie-cloudfront/

它的简短版本是：

编辑 S3 CORS 配置（我的代码示例未正确显示）
注意：这已在原始问题中完成
注意：提供的代码不是很安全，更多信息在链接页面中。
转到您的分发版的“行为”标签，然后点击编辑
将“转发标头”从“无（改进缓存）”更改为“白名单”。
将“Origin”添加到“Whitelist Headers”列表中
保存更改

您的云端分发将更新，大约需要 10 分钟。之后，一切都应该好了，您可以通过检查浏览器中与 CORS 相关的错误消息是否消失来验证。

【讨论】：

【解决方案8】：

我只需将<AllowedMethod>HEAD</AllowedMethod> 添加到 S3 存储桶的 CORS 策略即可解决问题。

例子：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

【讨论】：

虽然不确定安全性，但如果有人对此有一些意见会很好..
这种变化是否需要时间来传播？我刚刚将 <AllowedMethod>HEAD</AllowedMethod> 添加到存储桶上的 CORS 策略中，但它仍然无法正常工作。
通常不，它应该最多。几分钟

【解决方案9】：

有一篇很好的文章here。

在 nginx/apache 中配置这个是错误的。
如果您使用的是托管公司，则无法配置边缘。
如果您使用的是 Docker，则应用程序应该是自包含的。

请注意，有些示例使用connectHandlers，但这仅在文档上设置标题。使用 rawConnectHandlers 适用于所有提供的资产（字体/css/等）。

  // HSTS only the document - don't function over http.  
  // Make sure you want this as it won't go away for 30 days.
  WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader('Strict-Transport-Security', 'max-age=2592000; includeSubDomains'); // 2592000s / 30 days
    next();
  });

  // CORS all assets served (fonts/etc)
  WebApp.rawConnectHandlers.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    return next();
  });

现在是查看 browser policy 之类的框架等的好时机。

【讨论】：

【解决方案10】：

2014 年 6 月 26 日，AWS 在 CloudFront 上发布了适当的 Vary: Origin 行为，所以现在您只需

为您的 S3 存储桶设置 CORS 配置：

<AllowedOrigin>*</AllowedOrigin>

在 CloudFront -> Distribution -> Behaviors for this origin 中，使用 Forward Headers: Whitelist 选项并将“Origin”标头列入白名单。

在 CloudFront 传播新规则时等待约 20 分钟

现在您的 CloudFront 分配应该为不同的客户端 Origin 标头缓存不同的响应（使用适当的 CORS 标头）。

【讨论】：

这似乎不起作用，您有更多详细信息吗？我启用了这个，但我仍然遇到完全相同的问题。

【解决方案11】：

唯一对我有用的东西（可能是因为我与 www. 用法不一致）：

将其粘贴到您的 .htaccess 文件中：

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

【讨论】：

由于您的代码很详细，我花了一些时间来完成它，但我学到的东西很少。我应用它的一部分来调整我的解决方案。它奏效了。

【解决方案12】：

Nginx：

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

AWS S3：

选择您的存储桶
点击右上角的属性
权限 => 编辑 Cors 配置 => 保存
保存

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

【讨论】：

添加这个后，得到404 not found。

【解决方案13】：

将此规则添加到您的 .htaccess

Header add Access-Control-Allow-Origin "*"

更好的是，正如@david thomas 所建议的那样，您可以使用特定的域值，例如

Header add Access-Control-Allow-Origin "your-domain.com"

【讨论】：

嗨，Header set Access-Control-Allow-Origin "*" 有什么区别？谢谢
对于 windows 用户，在 web.config 文件中的下设置。祝你有美好的一天
@Simone 的不同之处在于，使用“add”时，响应标头会添加到现有的标头集中，即使此标头已经存在。这可能导致两个（或更多）标题具有相同的名称；而使用“set”设置响应标头，用此名称替换任何先前的标头。在这种情况下是相同的原因 * 包括所有这些。
只是注意到Access-Control-Allow-Origin "*" 可能是不安全的，因为它将域开放给任何域的 javascript 访问。您应该改用特定的域值，例如 Access-Control-Allow-Origin "http://example1.com" 另请参阅 stackoverflow.com/a/10636765/583715 以获得很好的解释。
你是我的救星！

【解决方案14】：

自 2014 年 9 月/10 月以来的 Chrome 使字体受到与 Firefox 所做的相同的 CORS 检查 https://code.google.com/p/chromium/issues/detail?id=286681。 https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw有一个关于这个的讨论

考虑到对于字体，浏览器可能会执行 preflight check，那么您的 S3 策略 needs the cors request header as well。您可以在 Safari（目前不执行 CORS 检查字体）和 Firefox（执行）中检查您的页面，以仔细检查这是所描述的问题。

有关 Amazon S3 CORS 的详细信息，请参阅 Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading 上的堆栈溢出答案。

一般来说注意，因为这过去仅适用于 Firefox，因此搜索 Firefox 而不是 Chrome 可能会有所帮助。

【讨论】：

感谢您的回答，看来这对许多其他人来说可能是个问题。虽然我的问题发生在 Chrome 的稳定版本中。
Chrome 现在正在发生这种情况。
随着人们不断提到（包括我自己！）这个答案，我已经使它不那么具有历史意义，并且与今天更相关。
另外仅供参考，我发现一条错误消息“已被跨域资源共享策略阻止加载：请求的资源上不存在'Access-Control-Allow-Origin'标头。来源” 实际上与我的原始服务器中的字体文件路径错误有关，然后云端重定向到我的服务器的主页（并且重定向响应或主页没有 CORS标题）。令人困惑，但通过使用实际字体文件的正确路径解决了（严格来说，不是 CORS 问题）。
嘿@DallasClark，您可能想为您的问题选择一个可接受的答案。谢谢蒂姆，您的链接和解释对我的经验很有帮助。干杯。