У меня есть приложение Javascript, которое доставляется в браузер с конечной точки CloudFront. Все статические файлы приложения размещаются в корзине S3. Это включает в себя целую кучу файлов javascript и css, а также некоторые файлы шрифтов.
HTML-код, загружающий все приложение, генерируется и доставляется сервером, назовем этот сервер «https://my.domain.com».
Как уже упоминалось, это всего лишь файл html. Все затем статический контент загружается из конечной точки облачного интерфейса, которая указывает на корзину в качестве своего источника. Назовем их xxxx.cloudfront.net, а ведро my-bucket.
Насколько я понимаю, почти любой запрос из этого сгенерированного html к конечной точке облачного интерфейса является запросом CORS, поскольку источником html является my.domain.com, и все запрошенные файлы явно не размещены в этом домене.
Поэтому, естественно, я пошел настраивать все материалы CORS. Прежде всего, это ведро является общедоступным и имеет следующую политику CORS:
[
{
"Разрешенные заголовки": [
"*"
],
"Разрешенные методы": [
"ПОЛУЧАТЬ"
],
"Разрешено происхождение": [
"*",
],
«Разоблачить заголовки»: [],
"MaxAgeSeconds": 3000
}
]
И это, кажется, работает, для всего... кроме файлы шрифтов!
Я, вероятно, должен упомянуть структуру папок ведра. Он имеет три папки: производство, разработка и общее. Их содержание должно быть достаточно понятным. Common содержит шрифты, а также некоторые сторонние библиотеки javascript. Производство и разработка содержат js и css для соответствующих сред.
В любом случае, все загружает, кроме файлов шрифтов, для которых я получаю следующую ошибку:
Доступ к шрифту https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2 из источника https://my.domain.com заблокирован политикой CORS: Нет Заголовок Access-Control-Allow-Origin присутствует в запрошенном ресурсе.
Мне показалось крайне странным, что Только файлы шрифтов будут иметь эту проблему. Другие файлы в общей папке загружаются нормально, и если я просто вставлю https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2 в моем браузере, это работает.
Разница только в том, что эти файлы загружаются не из html, а из css через @font-face штучку. Глядя на запросы, сгенерированные браузером при загрузке приложения, я ясно вижу, что, например, установлен заголовок источника, чего не было для запроса файлов js или css. Для Set-Fetch-Mode установлено значение «cors», а для других файлов — «no-cors».
В любом случае, я попытался решить проблему на стороне облачного интерфейса. Во-первых, я добавил заголовок «Access-Control-Allow-Origin: *» в исходную конфигурацию. Затем я добавил конфигурацию поведения для источника, чтобы разрешить GET, HEAD, OPTIONS для шаблона пути *.
И теперь... ну, теперь у меня все та же проблема, и у меня совершенно нет идей, хотя я задаюсь вопросом, почему запрос, созданный @font-face, формируется так по-разному по сравнению с запросами на ресурсы javascript и css, но самое главное, что я могу сделать, чтобы загрузить в них чертовы шрифты?
