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 nhiều nguồn gốc

161
Dallas Clark 2014-08-30 14:50.

Tôi gặp lỗi sau trên một số 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 Nhiều Nguồn gốc: Không có tiêu đề 'Access-Control-Allow-Origin' trên tài nguyên được yêu cầu. Nguồn gốc ' https://sub.domain.com ' do đó 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 bình thường, bao gồm cả các tệp JS.

10 answers

90
shaithana 2015-01-31 03:27.

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, theo đề xuất của @david thomas, bạn có thể sử dụng một giá trị miền cụ thể, ví dụ:

Header add Access-Control-Allow-Origin "your-domain.com"
59
Tim Diggins 2014-09-06 21:48.

Chrome kể từ ~ tháng 9 / tháng 10 năm 2014 làm cho phông chữ phải tuân theo kiểm tra CORS giống như Firefox đã thực hiện https://code.google.com/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ì đối với các phông chữ, trình duyệt có thể thực hiện kiểm tra trước , thì 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 trong ví dụ như Safari (hiện tại không thực hiện CORS kiểm tra phông chữ) và Firefox (điều đó) để kiểm tra lại đây là sự cố được mô tả.

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

NB nói chung vì điều này chỉ áp dụng cho Firefox, vì vậy nó có thể hữu ích khi tìm kiếm Firefox hơn là Chrome.

46
Özer S. 2016-12-30 12:14.

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>
30
Yaniv Vova Alterman 2015-07-04 14:12.

Nginx:

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

AWS S3:

  1. Chọn nhóm của bạn
  2. Nhấp vào thuộc tính ở trên cùng bên phải
  3. Permisions => 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-going-to-need-some-cors/

12
KBH 2015-03-17 20:03.

Vào ngày 26 tháng 6 năm 2014 AWS đã phát hành hành vi Vary: Origin thích hợp trên CloudFront, vì vậy 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 -> Distribution -> Behaviors cho nguồn gốc này, hãy sử dụng tùy chọn Forward Headers: Whitelist và đưa tiêu đề 'Origin' vào danh sách trắng.

Chờ ~ 20 phút trong khi CloudFront phổ biến quy tắc mới

Giờ đây, bản phân phối CloudFront của bạn sẽ lưu vào bộ nhớ cache các phản hồi khác nhau (với tiêu đề CORS thích hợp) cho các tiêu đề Nguồn gốc ứng dụng khách khác nhau.

7
Luigi04 2016-02-02 11:40.

Điều duy nhất có hiệu quả với tôi (có thể vì tôi không nhất quán với cách sử dụng www.):

Dán cái 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.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

3
agbodike 2017-05-13 14:34.

Tôi đã gặp vấn đề tương tự và liên kết này đã cung cấp giải pháp cho tôi:

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

Phiên bản ngắn gọ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, hãy xem thêm thông tin trong trang được liên kết.
  2. Chuyển đến tab "Hành vi" trong 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ừ "Không có (Cải thiện bộ nhớ đệm)" thành "Danh sách trắng."
  4. Thêm "Nguồn gốc" vào danh sách "Tiêu đề danh sách trắng"
  5. Lưu các thay đổi

Bản phân phối mặt tiền đá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 hay chưa.

2
nu everest 2017-11-03 04:45.

Đố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 cái này với web.config của bạn.

Để cho phép trên bất kỳ miền nào, hãy 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, 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");
1
Michael Cole 2016-11-29 16:10.

Có một bài viết hay ở đây .

Định cấu hình điều 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 phải được tự động.

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. Việc sử dụng rawConnectHandlersáp dụng cho tất cả các nội dung được cung cấp (font / 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();
  });

Đâ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.

0
Daksh Patel 2020-04-29 08:22.

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

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Sau khi Sarah Palin tán thành Donald Trump vào đầu tuần này, gần như không thể tránh khỏi việc Tina Fey sẽ trở lại Saturday Night Live để thăm lại ấn tượng Palin cổ điển của cô. Và Fey chắc chắn đã không làm thất vọng, cô ấy đã đưa ra một lời khen ngợi không hề nhẹ về bài phát biểu chứng thực Iowa quanh co và khó hiểu của Palin trong khi Trump của Darrell Hammond đưa ra bình luận xuyên suốt.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử hiện đại.

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Chúng ta có thể thấy nhiều hơn nữa về một Julio Jones khỏe mạnh trong khu vực cuối năm nay. John Parker Wilson, Greg McElroy, A.

Đó phải là Đức

Đó phải là Đức

Đối với đội tuyển Anh, không có kẻ thủ ác nào lớn hơn Hầu hết các cổ động viên Anh, nếu không muốn nói là tất cả, hẳn sẽ phải gật gù khi tiếng còi mãn cuộc của trận bán kết lượt về W Euro 2022 vang lên. Bởi vì nó báo hiệu rằng Đức sẽ chờ đợi ở Wembley trong trận chung kết với Anh và là điều duy nhất giữa Anh và chiếc cúp lớn đầu tiên của đội tuyển nữ.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language