AWS CloudFront：來自源的字體已被跨源資源共享策略阻止加載

Question

我在幾個 Chrome 瀏覽器上收到以下錯誤，但不是全部。 完全不確定此時的問題是什么。

來自https://ABCDEFG.cloudfront.net的字體已被跨源資源共享策略阻止加載：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 因此不允許訪問源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 文件。

Answer 1

將此規則添加到您的.htaccess

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

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

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

Answer 2

自 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對此進行了討論

鑒於對於字體，瀏覽器可能會進行預檢，那么您的 S3 策略也需要 cors 請求標頭。 您可以在 Safari（目前不執行 CORS 檢查字體）和 Firefox（執行）中檢查您的頁面，以仔細檢查這是所描述的問題。

有關 Amazon S3 CORS 的詳細信息，請參閱有關Amazon S3 CORS（跨源資源共享）和 Firefox 跨域字體加載的堆棧溢出答案。

一般注意，因為這曾經僅適用於 Firefox，因此搜索 Firefox 而不是 Chrome 可能會有所幫助。

Answer 3

我可以通過簡單地將<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>

Answer 4

Nginx：

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/

Answer 5

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 標頭）。

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/

它的簡短版本是：

1. 編輯 S3 CORS 配置（我的代碼示例沒有正確顯示）
   注意：這已經在原始問題中完成
   注意：提供的代碼不是很安全，鏈接頁面中的更多信息。
2. 轉到您的發行版的“行為”選項卡，然后單擊以進行編輯
3. 將“轉發標頭”從“無（改進緩存）”更改為“白名單”。
4. 將“Origin”添加到“Whitelist Headers”列表
5. 保存更改

您的雲端分發將更新，這大約需要 10 分鍾。 之后，一切都會好起來的，您可以通過檢查與 CORS 相關的錯誤消息是否已從瀏覽器中消失來進行驗證。

Answer 8

對於那些使用帶有 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 9

對於 AWS S3，將跨域資源共享 (CORS) 設置為以下對我有用：

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

Answer 10

這里有一篇不錯的文章。

在 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();
  });

這將是查看瀏覽器策略（如框架等）的好時機。

Answer 11

聚會遲到了，但我剛剛遇到了這個問題，並在我的 AWS 存儲桶配置（權限選項卡）中使用以下設置解決了這個問題。 請求的格式不再是 XML，而是 JSON：

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

Answer 12

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

像這樣

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

我們需要原產地響應

Answer 13

如果要允許特定域的文件夾中的所有字體，則可以使用以下命令：

  <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 14

將此添加到您的 .htaccess 文件中。 這解決了我的問題。

<FilesMatch ".(eot|otf|ttf|woff|woff2)">
    Header always set Access-Control-Allow-Origin "*"
</FilesMatch>

Answer 15

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 相信您真的下定決心。