Question

我在几台Chrome浏览器上收到以下错误，但并非全部。目前还不确定问题是什么。

来自原点的字体＆＃39; https://ABCDEFG.cloudfront.net＆＃39;已被跨源资源共享策略阻止加载：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; https://sub.domain.com＆＃39;因此不允许访问。

我在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文件。

Answer 1

将此规则添加到 .htaccess

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

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

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

Answer 2

自2014年9月/ 10月以来，Chrome使字体与Firefox执行的https://code.google.com/p/chromium/issues/detail?id=286681进行相同的CORS检查。在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上的堆栈溢出应答。

NB一般来说因为过去只适用于Firefox，所以搜索Firefox而不是Chrome可能会有所帮助。

Answer 3

我只需将<AllowedMethod>HEAD</AllowedMethod>添加到S3 Bucket的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>

Answer 4

Nginx的：

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

AWS S3：

选择您的水桶
点击右上角的属性
Permisions =＆gt;编辑Cors配置=＆gt;保存
保存

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

Answer 5

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

为S3存储桶设置CORS配置：

<AllowedOrigin>*</AllowedOrigin>

在CloudFront中 - ＆gt;分发 - ＆gt;此来源的行为，使用Forward Headers：Whiteelist选项并将'Origin'标题列入白名单。

等待~20分钟，而CloudFront传播新规则

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

Answer 6

唯一对我有用的东西（可能是因为我与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

Answer 7

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

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

简短版本是：

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

您的Cloudfront分发版将更新，大约需要10分钟。之后，一切都很好，您可以通过检查与浏览器相关的CORS相关错误消息进行验证。

Answer 8

有一个很好的写作here。

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

请注意，有些示例使用connectHandlers，但这只会在文档上设置标题。使用rawConnectHandlers适用于所有服务的资源（fonts / css / etc）。

  // 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框架等的好时机。

Answer 9

对于那些使用带有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");

Answer 10

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

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

Answer 11

如果您将node.js用作服务器，只需在您的服务器中添加原产地用途...

像这样

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

我们需要对起源做出回应

Answer 12

如果您想允许特定域的文件夹中的所有字体，则可以使用：

  <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 是您要允许的位置。

Answer 13

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个条目）。将转发标题从“无”更改为“临时列表”。并将以下标题添加到白名单：

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

保存它，就是这样！

警告：我发现即使CORS错误消失，Firefox也不会刷新字体。在这种情况下，请多次刷新页面，以使Firefox确信您确实已经确定。

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

13 个答案:

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

配置Cloudfront以转发CORS HTTP标头