AWS S3 yêu cầu xuất xứ chéo không thành công trên ie9

Question

Tôi đang cố gắng tạo phông chữ trên web và triển khai trên AWS S3.

Hoạt động tốt trong tất cả các trình duyệt ngoại trừ IE9, nơi nó cho biết yêu cầu xuất xứ chéo không thành công khi cố gắng tải tệp woff.

Tôi đã đọc rất nhiều và rất nhiều diễn đàn về những người gặp vấn đề, nhưng tôi không thể tìm thấy bản sửa lỗi.

Tôi nghĩ rằng đó là một cái gì đó để làm với các thiết lập CORS trên S3 không gửi dữ liệu chính xác hoặc một cái gì đó để IE9?

(công trình trong Firefox, Chrome, IE7,8, vv)

Những gợi ý duy nhất tôi đã nhìn thấy để sửa chữa vấn đề là, quay lên một thể EC2 và thực hiện một máy chủ web cho các phông chữ (overkill hoàn chỉnh !) và cái còn lại đặt tên cho tệp css là .php và đặt tiêu đề trong php (nhưng đây là daft).

Bất kỳ ai biết cách (nếu có thể) để khắc phục vấn đề này?

Cảm ơn

Sửa

My CORS config:

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Answer 1

IE9 hỗ trợ .WOFF; IE8 không, và chỉ hỗ trợ các phông chữ .EOT.

Mở IE9 cụ F12 Developer và bạn thấy thông báo sau:

CSS3117: @ font-face yêu cầu bị lỗi cross-xứ. Truy cập tài nguyên bị hạn chế. Neuton-webfont.woff

CSS3117: @ phông chữ không thành công yêu cầu xuất xứ chéo. Truy cập tài nguyên bị hạn chế. YanoneKaffeesatz-Regular-webfont.woff

CSS3114: @ font-face failed Kiểm tra quyền nhúng OpenType. Quyền phải được cài đặt. Neuton-webfont.ttf

CSS3114: @ font-face failed Kiểm tra quyền nhúng OpenType. Quyền phải được cài đặt. YanoneKaffeesatz-Regular-webfont.ttf Kiểm tra tiêu đề HTTP của bạn, rõ ràng rằng quyền truy cập tên miền chéo của bạn không được định cấu hình đúng, vì không có tiêu đề phản hồi Access-Control-Allow-Origin trên các tệp WOFF của bạn. Chúng cũng được phân phối với kiểu MIME sai (text/plain) mặc dù điều đó không gây ra vấn đề của bạn.

Nếu bạn muốn giữ IE8 trên máy tính và thử nghiệm của bạn chống lại IE9, tải về độc Platform Preview 8 từ here

IE9 blocks download of cross-origin web font

Answer 2

Bạn có thể dễ dàng giải quyết vấn đề này bằng cách thiết lập cấu hình CORS cho xô S3 bạn đang lưu trữ phông chữ của mình.

1. Enable CORS vào xô của bạn như đã giải thích ở đây: http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html

2. Đặt cấu hình phù hợp theo quy định ở đây: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

Answer 3

Tôi vừa mới thực hiện nó. Về cơ bản, bạn có thể làm theo các bước để chỉnh sửa quyền truy cập thùng S3 của bạn. Nếu bạn cần thêm bất kỳ trợ giúp nào, hãy để lại nhận xét dưới đây.

1) Đăng nhập vào Management Console AWS và mở giao diện điều khiển Amazon S3 tại https://console.aws.amazon.com/s3/

2) Trong danh sách Xô, mở thùng mà các thuộc tính bạn muốn xem và bấm vào nút "thêm cấu hình CORS"

3) Viết các quy tắc bạn sẵn sàng để thêm vào giữa các thẻ <CORSConfiguration>

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

Bạn có thể tìm hiểu thêm về quy tắc tại địa chỉ: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

Answer 4

Cái điều làm cho các thiết lập CORS làm việc đối với tôi là cách nhấn vào nút DELETE trên trang cài đặt CORS và sau đó thêm một CORS cấu hình mới

Việc chỉnh sửa cài đặt hiện có dường như không có hiệu lực cho đến khi tôi nhấn DELETE.