Phông chữ từ nguồn gốc đã bị chặn tải bởi chính sách Chia sẻ tài nguyên chéo

Tôi đang nhận được lỗi sau trên một vài trình duyệt Chrome nhưng không phải tất cả. Không chắc chắn hoàn toàn vấn đề là gì vào thời điểm này.

Phông chữ từ nguồn gốc ' https://ABCDEFG.cloudfront.net ' đã bị chặn tải bởi chính sách Chia sẻ tài nguyên nguồn gốc chéo: Không có tiêu đề 'Kiểm soát truy cập-cho phép-xuất xứ' trên tài nguyên được yêu cầu. Do đó, nguồn gốc ' https://sub.domain.com ' không được phép truy cập.

Tôi có cấu hình CORS sau trên S3

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedHeader>*</AllowedHeader>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Yêu cầu

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

Tất cả các yêu cầu khác từ Cloudfront / S3 đều hoạt động chính xác, bao gồm các tệp JS.

Thêm quy tắc này vào .htaccess của bạn

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

thậm chí tốt hơn, như được đề xuất bởi @david thomas, bạn có thể sử dụng một giá trị tên miền cụ thể, ví dụ:

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

Chrome kể từ ~ tháng 9/10 năm 2014 làm cho các phông chữ phải chịu các kiểm tra CORS giống như Firefox đã thực hiện https://code.google.com.vn/p/chromium/issues/detail?id=286681 . Có một cuộc thảo luận về vấn đề này trong https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

Vì các phông chữ trình duyệt có thể thực hiện kiểm tra trước , chính sách S3 của bạn cũng cần tiêu đề yêu cầu cors . Bạn có thể kiểm tra trang của mình bằng Safari (hiện tại không kiểm tra CORS cho phông chữ) và Firefox (điều đó) để kiểm tra kỹ xem đây có phải là sự cố được mô tả không.

Xem câu trả lời tràn Stack trên Amazon S3 CORS (Chia sẻ tài nguyên nguồn gốc chéo) và tải phông chữ chéo tên miền Firefox để biết chi tiết Amazon S3 CORS.

NB nói chung vì điều này được sử dụng để chỉ áp dụng cho Firefox, vì vậy nó có thể giúp tìm kiếm Firefox hơn là Chrome.

Tôi đã có thể giải quyết vấn đề bằng cách thêm <AllowedMethod>HEAD</AllowedMethod>vào chính sách CORS của Nhóm S3.

Thí dụ:

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

Nginx:

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

AWS S3:

1. Chọn thùng của bạn
2. Nhấp vào thuộc tính trên cùng bên phải
3. Quyền => Chỉnh sửa cấu hình Cors => Lưu
4. Tiết kiệm

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

Vào ngày 26 tháng 6 năm 2014 AWS đã phát hành Vary: Origin hành vi thích hợp trên CloudFront để bây giờ bạn chỉ cần

Đặt cấu hình CORS cho nhóm S3 của bạn:

<AllowedOrigin>*</AllowedOrigin>

Trong CloudFront -> Phân phối -> Hành vi cho nguồn gốc này, hãy sử dụng tùy chọn Chuyển tiếp tiêu đề: Danh sách trắng và liệt kê danh sách tiêu đề 'Xuất xứ'.

Đợi khoảng 20 phút trong khi CloudFront tuyên truyền quy tắc mới

Bây giờ, bản phân phối CloudFront của bạn sẽ lưu trữ các phản hồi khác nhau (với các tiêu đề CORS phù hợp) cho các tiêu đề Origin của khách hàng khác nhau.

Điều duy nhất đã làm việc cho tôi (có lẽ vì tôi không nhất quán với việc sử dụng www.):

Dán tệp này vào tệp .htaccess của bạn:

<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.theturngate.net/doku.php?id=cross-domain_issues_broken_web_fonts

Tôi đã có cùng một vấn đề và liên kết này cung cấp giải pháp cho tôi:

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

Phiên bản ngắn của nó là:

1. Chỉnh sửa cấu hình S3 CORS (mẫu mã của tôi không hiển thị đúng)
   Lưu ý: Điều này đã được thực hiện trong câu hỏi ban đầu
   Lưu ý: mã được cung cấp không an toàn lắm, có thêm thông tin trong trang được liên kết.
2. Chuyển đến tab "Hành vi" của bản phân phối của bạn và nhấp để chỉnh sửa
3. Thay đổi "Tiêu đề chuyển tiếp" từ Ngôi nhà Không (Cải thiện bộ nhớ đệm) thành Tập sách trắng.
4. Thêm nguồn gốc Origin vào danh sách "Tiêu đề danh sách trắng"
5. Lưu các thay đổi

Phân phối trên nền tảng đám mây của bạn sẽ cập nhật, mất khoảng 10 phút. Sau đó, tất cả sẽ ổn, bạn có thể xác minh bằng cách kiểm tra xem các thông báo lỗi liên quan đến CORS đã biến mất khỏi trình duyệt.

Đối với những người sử dụng các sản phẩm của Microsoft có tệp web.config:

Hợp nhất điều này với web.config của bạn.

Để cho phép trên bất kỳ tên miền thay thế value="domain"bằngvalue="*"

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

Nếu bạn không có quyền chỉnh sửa web.config, thì hãy thêm dòng này vào mã phía máy chủ của bạn.

Response.AppendHeader("Access-Control-Allow-Origin", "domain");

Có một writeup tốt đẹp ở đây .

Cấu hình này trong nginx / apache là một sai lầm.
Nếu bạn đang sử dụng một công ty lưu trữ, bạn không thể cấu hình cạnh.
Nếu bạn đang sử dụng Docker, ứng dụng sẽ được khép kín.

Lưu ý rằng một số ví dụ sử dụng connectHandlersnhưng điều này chỉ đặt tiêu đề trên tài liệu. Sử dụng rawConnectHandlersáp dụng cho tất cả các tài sản được phục vụ (phông chữ / css / vv).

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

Đây sẽ là thời điểm tốt để xem xét chính sách trình duyệt như đóng khung, v.v.

Chỉ cần thêm sử dụng nguồn gốc trong của bạn nếu bạn sử dụng node.js làm máy chủ ...

như thế này

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

Chúng tôi cần phản hồi về nguồn gốc

Giải pháp làm việc cho heroku có tại đây http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (trích dẫn theo sau):

Dưới đây là chính xác những gì bạn có thể làm nếu bạn đang chạy ứng dụng Rails trong Heroku và sử dụng Cloudfront làm CDN. Nó đã được thử nghiệm trên Ruby 2.1 + Rails 4, ngăn xếp Heroku Cedar.

Thêm tiêu đề CORS HTTP (Kiểm soát truy cập- *) vào nội dung phông chữ

• Thêm đá quý font_assetsvào Gemfile.
• bundle install
• Thêm config.font_assets.origin = '*'vào config/application.rb. Nếu bạn muốn kiểm soát chi tiết hơn, bạn có thể thêm các giá trị gốc khác nhau vào môi trường khác nhau, ví dụ:config/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• Đẩy mã đến Heroku.

Định cấu hình Cloudfront để chuyển tiếp các tiêu đề HTTP CORS

Trong Cloudfront, chọn phân phối của bạn, trong tab "hành vi", chọn và chỉnh sửa mục nhập kiểm soát việc phân phối phông chữ của bạn (đối với hầu hết ứng dụng Rails đơn giản, bạn chỉ có 1 mục nhập tại đây). Thay đổi tiêu đề chuyển tiếp từ "Không" thành "Whilelist". Và thêm các tiêu đề sau vào danh sách trắng:

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

Lưu nó và đó là nó!

Hãy cẩn thận: Tôi thấy rằng đôi khi Firefox sẽ không làm mới phông chữ ngay cả khi lỗi CORS không còn nữa. Trong trường hợp này, hãy tiếp tục làm mới trang một vài lần để thuyết phục Firefox rằng bạn thực sự quyết tâm.