Tôi có một ứng dụng Javascript được phân phối tới trình duyệt từ điểm cuối CloudFront. Tất cả các tệp tĩnh của ứng dụng được lưu trữ trong bộ chứa S3. Điều đó liên quan đến toàn bộ tệp javascript và css, cũng như một số tệp phông chữ.
Việc tải html toàn bộ ứng dụng được tạo và phân phối bởi một máy chủ, hãy gọi máy chủ đó là "https://my.domain.com".
Như đã đề cập, đây chỉ là tệp html. Tất cả các nội dung tĩnh sau đó được tải xuống từ điểm cuối trên nền tảng đám mây, điểm này trỏ đến một nhóm làm điểm gốc của nó. Hãy gọi những thứ này là xxxx.cloudfront.net và thùng my-bucket.
Theo như tôi hiểu, gần như bất kỳ yêu cầu nào từ html được tạo đó đến điểm cuối trên nền tảng đám mây đều là yêu cầu CORS, vì nguồn gốc của html là my.domain.com và tất cả các tệp được yêu cầu rõ ràng không được lưu trữ trên miền đó.
Vì vậy, một cách tự nhiên, tôi đã thiết lập tất cả những thứ của CORS. Trước hết, nhóm hoàn toàn công khai và có chính sách CORS sau:
[
{
"Tiêu đề được phép": [
"*"
],
"Phương thức được phép": [
"ĐƯỢC"
],
"AllowedOrigins": [
"*",
],
"ExposeHeaders": [],
"Tuổi tối đaGiây": 3000
}
]
Và điều đó dường như hiệu quả, đối với mọi thứ ... ngoại trừ các tập tin phông chữ!
Tôi có lẽ nên đề cập đến cấu trúc thư mục của thùng. Nó có ba thư mục, sản xuất, phát triển và chung. Nội dung của những điều này nên khá dễ hiểu. Common chứa các phông chữ, cũng như một số thư viện javascript của bên thứ ba. Sản xuất và phát triển chứa js và css cho các môi trường tương ứng của chúng.
Trong bất kỳ trường hợp nào, mọi thứ tải, ngoại trừ các tệp phông chữ mà tôi gặp phải lỗi sau:
Quyền truy cập vào phông chữ tại 'https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2' từ nguồn gốc 'https://my.domain.com' đã bị chính sách CORS chặn: Không Tiêu đề 'Kiểm soát truy cập-Cho phép-Xuất xứ' có trên tài nguyên được yêu cầu.
Nó gây ấn tượng với tôi là vô cùng kỳ lạ rằng chỉ có các tập tin phông chữ sẽ có vấn đề này. Các tệp khác trong thư mục chung dường như được tải tốt và nếu tôi chỉ cần dán https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2 vào trình duyệt của tôi, nó làm.
Sự khác biệt duy nhất dường như là các tệp này không được tải từ html, mà từ css thông qua @ font-face thingy. Nhìn vào các yêu cầu do trình duyệt tạo ra khi tải ứng dụng, tôi có thể thấy rõ ràng rằng ví dụ như tiêu đề gốc được đặt, không phải để yêu cầu các tệp js hoặc css. Set-Fetch-Mode được đặt thành "cors", trong khi đối với các tệp khác, nó được đặt thành "no-cors".
Trong mọi trường hợp, tôi đã cố khắc phục sự cố ở phía trước đám mây. Đầu tiên, tôi đã thêm tiêu đề "Kiểm soát truy cập-Cho phép-Xuất xứ: *" vào cấu hình gốc. Sau đó, tôi đã thêm cấu hình hành vi cho nguồn gốc để cho phép GET, HEAD, OPTIONS cho mẫu đường dẫn *.
Và bây giờ... tốt, bây giờ tôi vẫn gặp vấn đề tương tự và hoàn toàn không có ý tưởng nào, mặc dù tự hỏi về Tại sao yêu cầu được tạo bởi @ font-face được hình thành quá khác biệt khi so sánh với các yêu cầu đối với tài nguyên javascript và css, nhưng trên hết, tôi có thể làm cái quái gì để tải vào đó những phông chữ chết tiệt?
