跨来源资源共享政策禁止载入来源字体

我在一些 Chrome 浏览器上收到了以下错误，但不是全部。目前还不能完全确定问题出在哪里。

来源字体 https://ABCDEFG.cloudfront.net已被跨来源资源共享策略阻止加载: 请求的资源上没有“访问-控制-允许-来源”头。因此，不允许访问起源 https://sub.domain.example。

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

287240 次浏览
小开

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

假设对于字体，浏览器可能会执行 飞行前检查，那么您的 S3策略 也需要 cors 请求头。您可以在 say Safari (目前不执行 CORS 字体检查)和 Firefox (执行 CORS 字体检查)中检查您的页面，以再次检查这是所描述的问题。

有关 AmazonS3CORS 的详细信息，请参阅 Amazon S3 CORS (跨来源资源共享)和 Firefox 跨域字体加载上的堆栈溢出答案。

一般来说，注意这一点，因为这只适用于 Firefox，所以它可能有助于搜索 Firefox 而不是 Chrome。

小开

将此规则添加到 .htaccess

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

正如@davidThomas 所建议的那样，更好的是，您可以使用一个特定的域值，例如。

Header add Access-Control-Allow-Origin "your-domain.example"
小开

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

为 S3桶设置 CORS 配置:

<AllowedOrigin>*</AllowedOrigin>

在 CloudFront-> Distribution-> Behavior for this source 中，使用 Forward Header: Whitelist 选项和 Whitelist“ Origin”Header。

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

现在，CloudFront 发行版应该为不同的客户端 OriginHeader 缓存不同的响应(使用适当的 CORS Header)。

小开

返回文章页面

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

AWS S3:

  1. 选择你的桶
  2. 单击右上方的属性
  3. 权限 = > 编辑 Cors 配置 = > 保存
  4. 保存

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

小开

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 abc 0添加到 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 应用程序，这里只有一个条目)。将 前进标题从“无”更改为“同时列表”。并将以下标题添加到白名单中:

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

省省吧，就这样！

注意: 我发现有时候 Firefox 不会刷新字体，即使 CORS 错误消失了。在这种情况下，保持刷新页面几次，让 Firefox 相信你真的下定决心了。

小开

唯一对我有效的方法(可能是因为我与 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

小开

有一个很好的记录 给你。

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

注意，有些示例使用 connectHandlers，但是这只在文档上设置头部。使用 rawConnectHandlers适用于所提供的所有资产(字体/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();
});

这将是一个很好的时间来看看像框架等 浏览器政策。

小开

我能够通过简单地将 <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>
小开

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

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

简而言之就是:

  1. 编辑 S3CORS 配置(我的代码示例没有正确显示)
    注意: 这在最初的问题中已经完成了
    注意: 提供的代码不是很安全，更多的信息在链接页面。
  2. 转到您的发行版的“行为”选项卡并单击编辑
  3. 将“转发头”从“无(改进缓存)”更改为“白名单”
  4. 将“ Origin”添加到“ Whitelist Header”列表中
  5. 保存更改

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

小开

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

如果您使用 node.js 作为服务器，那么只需在您的..。

像这样

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

我们需要回应

小开

如果您希望允许某个特定域的文件夹中的所有字体，那么您可以使用以下命令:

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

其中，asset/font 是所有字体所在的位置，而 http://localhost:3000则是您希望允许的位置。

小开

对于 AWS S3，将跨来源资源共享(CORS)设置为以下对我来说很有效:

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

虽然已经迟到了，但我还是遇到了这个问题，并在我的 AWS bucket 配置(Permission 选项卡)中使用以下设置解决了这个问题。请求的格式不再是 XML，而是 JSON:

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

提交答案