blocks|key|148917|text|自2014年9月/10月以来，Chrome对字体的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中有关于这一点的讨论|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|148918|对于字体，浏览器可能会执行preflight+check，然后是您的S3策略needs+the+cors+request+header+as+well。你可以在Safari+(目前不做CORS字体检查)和Firefox+(检查字体)中检查你的页面，然后再检查一遍，这就是所描述的问题。|148919|有关亚马逊S3+CORS的详细信息，请参阅Amazon+S3+CORS+(Cross-Origin+Resource+Sharing)+and+Firefox+cross-domain+font+loading上的堆栈溢出答案。|148920|注意，因为这通常只适用于Firefox，所以搜索Firefox而不是Chrome可能会有所帮助。|148921|entityMap|0|LINK|mutability|MUTABLE|url|https://code.google.com/p/chromium/issues/detail?id=286681|1|https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw|2|http://www.w3.org/TR/cors/#preflight-request|3|http://www.w3.org/TR/cors/#access-control-request-headers-request-header|4|https://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa^0|Z|1M|0|2S|2G|1|0|D|F|2|12|11|3|0|L|2C|4|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]|$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]|$A|1A|B|1B|1|1C]]|C|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|H|3|I|5|6|7|1H|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]|T|$5|M|N|O|C|$P|U]]|V|$5|M|N|O|C|$P|W]]|X|$5|M|N|O|C|$P|Y]]]]

Chrome since ~Sep/Oct 2014 makes fonts subject to the same CORS checks as Firefox has done <a href="https://code.google.com/p/chromium/issues/detail?id=286681" rel="noreferrer">https://code.google.com/p/chromium/issues/detail?id=286681</a>. There is a discussion on this in <a href="https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw" rel="noreferrer">https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw</a>

Given that for fonts the browser may do a <a href="http://www.w3.org/TR/cors/#preflight-request" rel="noreferrer">preflight check</a>, then your S3 policy <a href="http://www.w3.org/TR/cors/#access-control-request-headers-request-header" rel="noreferrer">needs the cors request header as well</a>. You can check your page in say Safari (which at present doesn't do CORS checking for fonts) and Firefox (that does) to double check this is the problem described. 

See Stack overflow answer on <a href="https://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa">Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading</a> for the Amazon S3 CORS details.

NB in general because this used to apply to Firefox only, so it may help to search for Firefox rather than Chrome.

blocks|key|2942901|text|将此规则添加到您的.htaccess|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2942902|Header+add+Access-Control-Allow-Origin+"*"+|code-block|syntax|javascript|2942903|更好的是，正如@david+thomas所建议的那样，您可以使用特定的域值，例如|2942904|Header+add+Access-Control-Allow-Origin+"your-domain.com"|2942905|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Add this rule to your .htaccess

<pre><code>Header add Access-Control-Allow-Origin "*" 
</code></pre>

even better, as suggested by @david thomas, you can use a specific domain value, e.g.

<pre><code>Header add Access-Control-Allow-Origin "your-domain.com"
</code></pre>

blocks|key|2730645|text|2014年6月26日，亚马逊网络服务在CloudFront上发布了正确的变化:起源行为，所以现在你只需|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2730646|为您的S3存储桶设置CORS配置：|2730647|<AllowedOrigin>*</AllowedOrigin>|code-block|syntax|javascript|2730648|在此源的CloudFront+->分发->行为中，使用转发标头:白名单选项，并将‘源’标头列入白名单。|2730649|等待约20分钟，等待CloudFront传播新规则|2730650|现在，您的CloudFront发行版应该为不同的client+Origin头缓存不同的响应(使用正确的CORS头)。|2730651|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

On June 26, 2014 AWS released proper Vary: Origin behavior on CloudFront so now you just

Set a CORS Configuration for your S3 bucket:

<pre><code>&lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
</code></pre>

In CloudFront -> Distribution -> Behaviors for this origin, use the Forward Headers: Whitelist option and whitelist the 'Origin' header.

Wait for ~20 minutes while CloudFront propagates the new rule

Now your CloudFront distribution should cache different responses (with proper CORS headers) for different client Origin headers.

blocks|key|148951|text|Nginx：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|148952|location+~*+\.(eot%7Cttf%7Cwoff)$+{
+++add_header+Access-Control-Allow-Origin+'*';
}|code-block|syntax|javascript|148953|亚马逊网络服务S3：|148954|148955|选择您的存储桶|ordered-list-item|148956|单击右上角的属性|148957|Permisions+=>编辑Cors+Configuration+=>+bucket|148958|148959|http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/|offset|length|148960|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|0|2N|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|L|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|L|7|18|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1A|8|@]|9|@$T|1B|U|1C|1|1D]]|A|$]]|$1|V|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|S]]]]

Nginx:

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

AWS S3:

<ol>
<li>Select your bucket</li>
<li>Click properties on the right top</li>
<li>Permisions => Edit Cors Configuration => Save</li>
<li>Save</li>
</ol>

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

blocks|key|150464|text|heroku的工作解决方案在这里http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html+(引号如下)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|150465|如果你在Heroku中运行你的Rails应用，并使用Cloudfront作为你的CDN，下面就是你可以做的。它在Ruby+2.1+%2B+Rails+4，Heroku+Cedar堆栈上进行了测试。|150466|将CORS+HTTP标头(Access-Control-*)添加到字体资源|150467|gem+|150468|将gem+font_assets添加到Gemfile+config/application.rb。如果你想要更细粒度的控制，你可以将不同的原始值添加到不同的环境中，例如，将config/config/environments/production.rb|unordered-list-item|style|CODE|150469|curl+-I+http://localhost:3000/assets/your-custom-font.ttf|150470|Push代码添加到Heroku。|150471|150472|150473|配置Cloudfront转发CORS+HTTP报头|150474|在Cloudfront中，选择您的发行版，在"behavior“选项卡下，选择并编辑控制字体交付的条目(对于大多数简单的Rails应用程序，这里只有1个条目)。将转发报头从"None“改为"Whilelist”。并将以下头部添加到白名单中：|150475|Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age|code-block|syntax|javascript|150476|保存它，就是这样！|150477|注意:我发现有时候即使CORS错误消失了，Firefox也不会不刷新字体。在这种情况下，不断刷新页面几次，以使Firefox相信您确实下定决心了。|150478|entityMap|0|LINK|mutability|MUTABLE|url|http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html^0|G|2A|0|0|0|0|0|5|B|R|L|2E|14|0|0|1L|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|D|3|E|5|6|7|1J|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1K|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1L|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1M|8|@$A|1N|B|1O|M|N]|$A|1P|B|1Q|M|N]|$A|1R|B|1S|M|N]]|9|@]|C|$]]|$1|O|3|P|5|L|7|1T|8|@$A|1U|B|1V|M|N]]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1W|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1X|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|20|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|10|7|21|8|@]|9|@]|C|$11|12]]|$1|13|3|14|5|6|7|22|8|@]|9|@]|C|$]]|$1|15|3|16|5|6|7|23|8|@]|9|@]|C|$]]|$1|17|3|-4|5|6|7|24|8|@]|9|@]|C|$]]]|18|$19|$5|1A|1B|1C|C|$1D|1E]]]]

Working solution for heroku is here <a href="http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html" rel="nofollow noreferrer">http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html</a>
(quotes follow):

Below is exactly what you can do if you are running your Rails app in Heroku and using Cloudfront as your CDN. It was tested on Ruby 2.1 + Rails 4, Heroku Cedar stack.

<h2>Add CORS HTTP headers (Access-Control-*) to font assets</h2>

<ul>
<li>Add gem <code>font_assets</code> to Gemfile .</li>
<li><code>bundle install</code></li>
<li>Add <code>config.font_assets.origin = '*'</code> to <code>config/application.rb</code> . If you want more granular control, you can add different origin values to different environment, e.g., <code>config/config/environments/production.rb</code></li>
<li><code>curl -I http://localhost:3000/assets/your-custom-font.ttf</code></li>
<li>Push code to Heroku.</li>
</ul>

<h2>Configure Cloudfront to forward CORS HTTP headers</h2>

In Cloudfront, select your distribution, under "behavior" tab, select and edit the entry that controls your fonts delivery (for most simple Rails app you only have 1 entry here). Change Forward Headers from "None" to "Whilelist". And add the following headers to whitelist:

<pre><code>Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age
</code></pre>

Save it and that's it!

Caveat: I found that sometimes Firefox wouldn't not refresh the fonts even if CORS error is gone. In this case keep refreshing the page a few times to convince Firefox that you are really determined.

blocks|key|2730695|text|唯一对我有效的方法(可能是因为我对www.用法)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2730696|将此代码粘贴到.htaccess文件中：|2730697|<IfModule+mod_headers.c>
<FilesMatch+"\.(eot%7Cfont.css%7Cotf%7Cttc%7Cttf%7Cwoff)$">
++++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%2Bxml+svg+svgz
AddEncoding+gzip+svgz

</IfModule>

#+rewrite+www.example.com+→+example.com

<IfModule+mod_rewrite.c>
RewriteCond+%25{HTTPS}+!=on
RewriteCond+%25{HTTP_HOST}+%5Ewww\.(.%2B)$+[NC]
RewriteRule+%5E+http://%251%25{REQUEST_URI}+[R=301,L]
</IfModule>|code-block|syntax|javascript|2730698|http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts|offset|length|2730699|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|2A|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

The only thing that has worked for me (probably because I had inconsistencies with www. usage):

Paste this in to your .htaccess file:

<pre><code>&lt;IfModule mod_headers.c&gt;
&lt;FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$"&gt;
 Header set Access-Control-Allow-Origin "*"
&lt;/FilesMatch&gt;
&lt;/IfModule&gt;
&lt;IfModule mod_mime.c&gt;
# 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

&lt;/IfModule&gt;

# rewrite www.example.com → example.com

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

<a href="http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts" rel="noreferrer">http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts</a>

blocks|key|2730704|text|有一个很好的写here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2730705|在nginx/apache中配置它是一个错误。|style|BOLD|2730706|如果您使用的是托管公司，则无法配置边缘。|2730707|如果您使用的是Docker，应用程序应该是自包含的。|2730708|请注意，一些示例使用connectHandlers，但这只在文档上设置标题。使用rawConnectHandlers适用于所有提供服务的资源(字体/css等)。|CODE|2730709|++//+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();
++});|code-block|syntax|javascript|2730710|这将是一个很好的时机来看待browser+policy，比如帧等等。|2730711|entityMap|0|LINK|mutability|MUTABLE|url|http://enable-cors.org/server_meteor.html|1|https://github.com/meteor/meteor/tree/devel/packages/browser-policy^0|7|4|0|0|0|N|0|0|0|A|F|14|I|0|0|D|E|1|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|6|7|19|8|@$A|1A|B|1B|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1D|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1E|8|@$A|1F|B|1G|F|N]|$A|1H|B|1I|F|N]]|9|@]|C|$]]|$1|O|3|P|5|Q|7|1J|8|@]|9|@]|C|$R|S]]|$1|T|3|U|5|6|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|V|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]|13|$5|Y|Z|10|C|$11|14]]]]

There is a nice writeup <a href="http://enable-cors.org/server_meteor.html" rel="nofollow noreferrer">here</a>.

Configuring this in nginx/apache is a mistake. 
If you are using a hosting company you can't configure the edge. 
If you are using Docker, the app should be self contained.

Note that some examples use <code>connectHandlers</code> but this only sets headers on the doc. Using <code>rawConnectHandlers</code> applies to all assets served (fonts/css/etc).

<pre><code> // 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();
 });
</code></pre>

This would be a good time to look at <a href="https://github.com/meteor/meteor/tree/devel/packages/browser-policy" rel="nofollow noreferrer">browser policy</a> like framing, etc.

blocks|key|147742|text|我只需在S3存储桶的CORS策略中添加<AllowedMethod>HEAD</AllowedMethod>，就可以解决这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|147743|示例：|147744|<?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>|code-block|syntax|javascript|147745|entityMap^0|J|Z|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

I was able to solve the problem by simply adding <code>&lt;AllowedMethod&gt;HEAD&lt;/AllowedMethod&gt;</code> to the CORS policy of the S3 Bucket.

Example:

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

blocks|key|2730794|text|我也遇到了同样的问题，这个链接为我提供了解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2730795|http://www.holovaty.com/writing/cors-ie-cloudfront/|offset|length|2730796|它的简短版本是：|2730797|2730798|编辑S3+CORS配置(我的代码示例显示不正确)|ordered-list-item|2730799|2730800|注意:在原问题中已经这样做了。|2730801|注意:所提供的代码不是很安全，请在链接页面中查看更多信息。请转到分发的"Behaviors“选项卡，然后单击以编辑"Forward+Headers”，将“Forward+Headers”从“None(改进缓存)”更改为““Whitelist.”|2730802|Add”|unordered-list-item|2730803|
“|2730804|”|2730805|
|2730806|2730807|2730808|2730809|
changes|2730810|您的cloudfront分发版将更新，这需要大约10分钟。在此之后，一切都应该很好，您可以通过检查CORS相关的错误消息是否从浏览器中消失来进行验证。|2730811|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1F|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@]|9|@$D|1F|E|1G|1|1H]]|A|$]]|$1|F|3|G|5|6|7|1I|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1K|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1M|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1O|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1P|8|@]|9|@]|A|$]]|$1|V|3|W|5|S|7|1Q|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1R|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|S|7|1S|8|@]|9|@]|A|$]]|$1|10|3|Y|5|6|7|1T|8|@]|9|@]|A|$]]|$1|11|3|-4|5|S|7|1U|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1V|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1W|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|C]]]]

I had this same problem and this link provided the solution for me:

<a href="http://www.holovaty.com/writing/cors-ie-cloudfront/" rel="nofollow noreferrer">http://www.holovaty.com/writing/cors-ie-cloudfront/</a>

The short version of it is:

<ol>
<li>Edit S3 CORS config (my code sample didn't display properly) 
Note: This is already done in the original question 
Note: the code provided is not very secure, more info in the linked page.</li>
<li>Go to the "Behaviors" tab of your distribution and click to edit</li>
<li>Change "Forward Headers" from “None (Improves Caching)” to “Whitelist.”</li>
<li>Add “Origin” to the "Whitelist Headers" list</li>
<li>Save the changes</li>
</ol>

Your cloudfront distribution will update, which takes about 10 minutes. After that, all should be well, you can verify by checking that the CORS related error messages are gone from the browser.

blocks|key|147781|text|对于使用带有web.config文件的微软产品的用户：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|147782|将其与您的web.config合并。|147783|允许在任何域上使用|147784|用value="*"替换value="domain"|blockquote|offset|length|style|CODE|147785|147786|147787|<?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>|code-block|syntax|javascript|147788|如果您没有编辑web.config的权限，那么可以在服务器端代码中添加下面这一行。|147789|Response.AppendHeader("Access-Control-Allow-Origin",+"domain");|147790|entityMap^0|0|0|0|1|9|C|E|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|12|8|@$I|13|J|14|K|L]|$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|19|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1A|8|@]|9|@]|A|$]]|$1|V|3|W|5|Q|7|1B|8|@]|9|@]|A|$R|S]]|$1|X|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|Y|$]]

For those using Microsoft products with a web.config file:

Merge this with your web.config.

<blockquote>
 To allow on any domain replace <code>value="domain"</code> with <code>value="*"</code>
</blockquote>

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

If you don't have permission to edit web.config, then add this line in your server-side code.

<pre><code>Response.AppendHeader("Access-Control-Allow-Origin", "domain");
</code></pre>

blocks|key|150556|text|如果您使用node.js作为服务器，只需在您的中添加对源的使用...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|150557|像这样的|150558|blockquote|150559|150560|150561|++app.use((req,+res,+next)+=>+{
++res.header('Access-Control-Allow-Origin',+'*');
++next();
});|code-block|syntax|javascript|150562|150563|我们需要原始|150564|
的响应|150565|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|-4|5|E|7|V|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|W|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|N|3|O|5|E|7|10|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|11|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|S|$]]

Just add use of origin in your if you use node.js as server...

<blockquote>
 like this
</blockquote>

<pre><code> app.use((req, res, next) =&gt; {
 res.header('Access-Control-Allow-Origin', '*');
 next();
});
</code></pre>

<blockquote>
 We Need response for origin
</blockquote>

blocks|key|151709|text|如果您想要允许特定域中某个文件夹中的所有字体，则可以使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151710|++<location+path="assets/font">
++++<system.webServer>
++++++<httpProtocol>
++++++++<customHeaders>
++++++++++<add+name="Access-Control-Allow-Origin"+value="http://localhost:3000"+/>
++++++++</customHeaders>
++++++</httpProtocol>
++++</system.webServer>
++</location>|code-block|syntax|javascript|151711|其中assets/font是所有字体所在的位置，http://localhost:3000是您想要允许的位置。|offset|length|151712|entityMap|0|LINK|mutability|MUTABLE|url|http://localhost:3000/^0|0|0|O|L|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

If you want to allow all the fonts from a folder for a specific domain then you can use this:
<pre><code> &lt;location path=&quot;assets/font&quot;&gt;
 &lt;system.webServer&gt;
 &lt;httpProtocol&gt;
 &lt;customHeaders&gt;
 &lt;add name=&quot;Access-Control-Allow-Origin&quot; value=&quot;http://localhost:3000&quot; /&gt;
 &lt;/customHeaders&gt;
 &lt;/httpProtocol&gt;
 &lt;/system.webServer&gt;
 &lt;/location&gt;
</code></pre>
where assets/font is the location where all fonts are and http://localhost:3000 is the location which you want to allow.

blocks|key|151714|text|对于亚马逊网络服务S3，将跨域资源共享(CORS)设置为以下值对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151715|[
++++{
++++++++"AllowedHeaders":+[
++++++++++++"Authorization"
++++++++],
++++++++"AllowedMethods":+[
++++++++++++"GET",
++++++++++++"HEAD"
++++++++],
++++++++"AllowedOrigins":+[
++++++++++++"*"
++++++++],
++++++++"ExposeHeaders":+[]
++++}
]|code-block|syntax|javascript|151716|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For AWS S3, setting the Cross-origin resource sharing (CORS) to the following worked for me:
<pre><code>[
 {
 &quot;AllowedHeaders&quot;: [
 &quot;Authorization&quot;
 ],
 &quot;AllowedMethods&quot;: [
 &quot;GET&quot;,
 &quot;HEAD&quot;
 ],
 &quot;AllowedOrigins&quot;: [
 &quot;*&quot;
 ],
 &quot;ExposeHeaders&quot;: []
 }
]
</code></pre>

blocks|key|2943144|text|聚会迟到了，但我刚刚遇到了这个问题，并通过我的AWS存储桶配置(权限选项卡)中的以下设置解决了它。请求的格式不再是XML，而是JSON：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2943145|[
++++{
++++++++"AllowedHeaders":+[
++++++++++++"Content-*"
++++++++],
++++++++"AllowedMethods":+[
++++++++++++"GET",
++++++++++++"HEAD"
++++++++],
++++++++"AllowedOrigins":+[
++++++++++++"https://www.yourdomain.com",
++++++++++++"https://yourdomain.com"
++++++++],
++++++++"ExposeHeaders":+[]
++++}
]|code-block|syntax|javascript|2943146|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Late to the party, but I just ran into this problem and solved it with the following settings in my AWS bucket config (Permission tab). The requested format is not XML anymore but JSON:
<pre><code>[
 {
 &quot;AllowedHeaders&quot;: [
 &quot;Content-*&quot;
 ],
 &quot;AllowedMethods&quot;: [
 &quot;GET&quot;,
 &quot;HEAD&quot;
 ],
 &quot;AllowedOrigins&quot;: [
 &quot;https://www.yourdomain.com&quot;,
 &quot;https://yourdomain.com&quot;
 ],
 &quot;ExposeHeaders&quot;: []
 }
]
</code></pre>

I'm receiving the following error on a couple of Chrome browsers but not all. Not sure entirely what the issue is at this point.

<blockquote>
 Font from origin '<a href="https://ABCDEFG.cloudfront.net">https://ABCDEFG.cloudfront.net</a>' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="https://sub.domain.com">https://sub.domain.com</a>' is therefore not allowed access.
</blockquote>

I have the following CORS Configuration on S3

<pre><code>&lt;CORSConfiguration&gt;
 &lt;CORSRule&gt;
 &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
 &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
 &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
 &lt;/CORSRule&gt;
&lt;/CORSConfiguration&gt;
</code></pre>

The request

<pre><code>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
</code></pre>

All other requests from Cloudfront/S3 work properly, including JS files.

Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

服务器

JSON

我在几个Chrome浏览器上收到以下错误，但不是全部。在这一点上，我不完全确定问题是什么。跨域资源共享策略已阻止加载来自源'‘的字体:请求的资源上不存在'Access-Control-Allow- origin’标头。因此不允许访问源'‘。我在S3上有以下CORS配置<CORSConfiguration> <CORSR...

问来源字体已被跨域资源共享策略阻止加载
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问来源字体已被跨域资源共享策略阻止加载EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问来源字体已被跨域资源共享策略阻止加载
EN