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

10 回答

• 56

  将此规则添加到.htaccess

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

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

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

  回复于 2024-05-15T13:38:04+08:00
• 29

  自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上的堆栈溢出应答 .

  NB一般因为这只适用于Firefox，所以它可能有助于搜索Firefox而不是Chrome .

  回复于 2024-05-15T13:38:04+08:00
• 1

  我只需将 <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>
  

  回复于 2024-05-15T13:38:04+08:00
• 1

  Nginx的：

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

  AWS S3：

  • 选择你的水桶

  • 单击右上角的属性

  • Permisions =>编辑Cors配置=>保存

  • 保存

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

  回复于 2024-05-15T13:38:04+08:00
• 4

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

  为S3存储桶设置CORS配置：

  <AllowedOrigin>*</AllowedOrigin>
  

  在CloudFront - > Distribution - >此行为的行为中，使用Forward Headers：Whiteelist选项并将'Origin' Headers 列入白名单 .

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

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

  回复于 2024-05-15T13:38:04+08:00
• 3

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

  回复于 2024-05-15T13:38:04+08:00
• 40

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

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

  它的简短版本是：

  • 编辑S3 CORS配置（我的代码示例未正确显示）
    注意：这已在原始问题中完成
    注意：提供的代码不是很安全，链接页面中的更多信息 .

  • 转到您的发行版的"Behaviors"标签，然后单击进行编辑

  • 将“无（改进缓存）”中的"Forward Headers"更改为“白名单” .

  • 将“Origin”添加到"Whitelist Headers"列表中

  • 保存更改

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

  回复于 2024-05-15T13:38:04+08:00
• 78

  有一个很好的写作here .

  Configuring this in nginx/apache is a mistake.
  如果您使用的是托管公司，则无法配置边缘 .
  如果您使用的是Docker，应用程序应该是自包含的 .

  请注意，某些示例使用 connectHandlers ，但这仅在doc上设置标头 . 使用 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();
    });
  

  这是一个看待框架等的好时机 .

  回复于 2024-05-15T13:38:04+08:00
• 12

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

  将其与您的web.config合并 .

  允许在任何域上使用value =“*”替换value =“domain”

  <?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");
  

  回复于 2024-05-15T13:38:04+08:00
• -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中，选择您的发行版，在"behavior"选项卡下，选择并编辑控制字体交付的条目（对于大多数简单的Rails应用程序，此处只有1个条目） . 将前向 Headers 从"None"更改为"Whilelist" . 并将以下 Headers 添加到白名单：

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

  保存它，就是这样！

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

  回复于 2024-05-15T13:38:04+08:00