AWS S3 + CloudFront: шрифты не загружаются (проблема с CORS)

Question

Я добавил несколько пользовательских шрифтов на свой веб-сайт и загрузил их в AWS S3 + CloudFront.

Многие проблемы здесь описывают эту проблему, но ни одна из них не решает мою проблему.

Использованиеcurl Я получаю этот вывод:

curl --head  https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2
HTTP/1.1 200 OK
Content-Type: binary/octet-stream
Content-Length: 25348
Connection: keep-alive
Date: Tue, 22 Oct 2019 11:54:18 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Last-Modified: Fri, 12 Apr 2019 10:54:26 GMT
ETag: "639c2738552a0376c91e7d485e476fda"
Cache-Control: max-age=62208000
Accept-Ranges: bytes
Server: AmazonS3
X-Cache: Hit from cloudfront
Via: 1.1 bae3e24625567f5728a5caa96d6b7669.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: FRA53
X-Amz-Cf-Id: iAy-QTfuV9ZqwmaRjXE0ramVSgsZkA6MtRmQOKDSonf6I8OabrpLZA==
Age: 12818

В Chrome я получаю эту ошибку:

Access to font at 'https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2' from origin 'https://www.monteurzimmerguru.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Это точка, где я не понимаю проблему. Сообщение об ошибке гласит: «Отсутствует заголовок« Access-Control-Allow-Origin »» Но в запросе curl я вижу этот заголовок. Что не так?

Спасибо

Answer 1

Ваша конфигурация S3 CORS является правильной на основе следующих выводов:

>curl -vk "https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2" -H "Origin: https://www.monteurzimmerguru.de"
< HTTP/2 200 
< content-type: binary/octet-stream
< content-length: 25348
< date: Thu, 24 Oct 2019 12:19:41 GMT
< access-control-allow-origin: *
< access-control-allow-methods: HEAD, GET
< access-control-max-age: 3000
< last-modified: Fri, 12 Apr 2019 10:54:26 GMT
< etag: "639c2738552a0376c91e7d485e476fda"
< cache-control: max-age=62208000
< accept-ranges: bytes
< server: AmazonS3
< x-cache: Hit from cloudfront

Однако Chrome / Browser делает запрос OPTIONS / Preflight в CloudFront, и запрос параметров в облачном фронте в настоящее время не разрешен. Разрешены только Head и GET.

curl -X OPTIONS "https://cdn.mzguru.de/fonts/sourcesanspro/source-sans-pro-v12-latin-ext_latin-700.woff2" -H "Origin: https://www.monteurzimmerguru.de"
>This distribution is not configured to allow the HTTP request method that was used for this request

Чтобы это исправить, вам нужно сделать это:

1. В поведении кеша CloudFront необходимо разрешить GET,HEAD и OPTIONS

2. В режиме кэширования для кэширования на основе выбранного заголовка вам следует выбрать Origin

3. Один раз аннулировать кэш и протестировать его снова.