☰

Проблема AWS Cloudfront CORS с файлами шрифтов

tag-icon • tag-icon amazon-s3 amazon-cloudfront cors css
Проблема AWS Cloudfront CORS с файлами шрифтов

У меня есть приложение Javascript, которое доставляется в браузер из конечной точки CloudFront. Все статические файлы приложения размещаются в контейнере S3. Это включает в себя целый набор файлов javascript и css, а также несколько файлов шрифтов.

HTML-код, загружающий все приложение, генерируется и доставляется сервером, назовем этот сервер «https://my.domain.com».

Как уже упоминалось, это всего лишь HTML-файл.ВсеЗатем статический контент загружается из конечной точки cloudfront, которая указывает на bucket как на его источник. Назовем их xxxx.cloudfront.net, а bucket my-bucket.

Насколько я понимаю, практически любой запрос из этого сгенерированного HTML-кода к конечной точке CloudFront является запросом CORS, поскольку источником HTML-кода является my.domain.com, а все запрошенные файлы явно не размещены на этом домене.

Поэтому, естественно, я пошел настраивать все CORS-вещи. Во-первых, бакет полностью публичный, и у него следующая политика CORS:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*",
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

И, кажется, это работает во всем...кромефайлы шрифтов! Вероятно, мне следует упомянуть структуру папок ведра. В нем три папки: production, development и common. Их содержимое должно быть довольно понятным. Common содержит шрифты, а также некоторые сторонние библиотеки javascript. Production и development содержат js и css для соответствующих сред.

В любом случае,всезагружается, за исключением файлов шрифтов, для которых я получаю следующую ошибку:

Access to font at 'https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2' from origin 'https://my.domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Мне показалось крайне странным, чтотолькофайлы шрифтов будут иметь эту проблему. Другие файлы в общей папке, кажется, загружаются просто отлично, и если я просто вставлюhttps://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2в мой браузер, этоработает.

Единственное отличие, похоже, в том, что эти файлы загружаются не из html, а из css через @font-face. Глядя на запросы, генерируемые браузером при загрузке приложения, я ясно вижу, что, например, заголовок origin установлен, чего не было при запросе файлов js или css. Set-Fetch-Mode установлен на "cors", тогда как для других файлов он был установлен на "no-cors".

В любом случае, я попытался исправить проблему на стороне cloudfront. Сначала я добавил заголовок "Access-Control-Allow-Origin: *" в конфигурацию источника. Затем я добавил конфигурацию поведения для источника, чтобы разрешить GET, HEAD, OPTIONS для шаблона пути *.

А теперь... ну, теперь у меня все та же проблема, и у меня совершенно нет идей, хотя мне интересно, почему запрос, созданный @font-face, сформирован так по-другому по сравнению с запросами на ресурсы javascript и css, но больше всего, что, черт возьми, я могу сделать, чтобы загрузить эти чертовы шрифты?

решение1

Ладно, это было раздражающе, но, думаю, логично.

Исправления, которые я разместил вышеВыполнять работу, но изменения конфигурации не делают кэш cloudfront недействительным. И поскольку ошибки CORS генерируютсябраузерCloudfront действительно кэшировал этот ответ, заголовки и все остальное, поскольку не увидел в нем ничего неправильного.

Короче говоря: кэш CloudFront был аннулирован после изменения конфигурации, теперь он работает. АРГХ!

Связанный контент