Назад | Перейти на главную страницу

AWS S3, CloudFront, ошибка CORS веб-шрифтов

Я только что перешел с предыдущего CDN на CloudFront для двух своих веб-сайтов. Первый работает нормально, но я использовал тот же снимок в DigitalOcean для создания второго сайта, и вот я получаю

Доступ к шрифту в 'http://CLOUDFRONT_HOSTNAME.cloudfront.net/wp-content/themes/Newspaper/images/icons/newspaper.woff?14'от происхождения'http://www.example.com'был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin '. Происхождение 'http://www.example.com'поэтому не разрешен доступ.

Я перепробовал все возможные решения, доступные в Интернете, например, добавление заголовка в nginx.

location ~* \.(ttf|ttc|otf|eot|woff|svg|font.css)$ {
    add_header Access-Control-Allow-Origin *;
}

Затем обновите конфиденциальность в S3

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Большинство решений находится на разных сайтах, включая другие решения для сбоев сервера и stackoverflow. Я также сделал недействительным файл шрифта в CloudFront, но не повезло :(

Может кто-нибудь посоветовать мне, в чем может быть проблема? Я подключил CloudFront через плагин W3 Total Cache в WP.

ОБНОВИТЬ

1. Заголовки белого списка

2. Файлы признаны недействительными.

  1. Запрос и ответ

Заранее спасибо

Ариф

Я искал это сегодня и не смог найти никакого рабочего ответа для своего сценария.

Я использую wordpress и использую исходный push cdn на основе s3 bucket с amazon cloudfront. Однако файлы шрифтов давали ошибку для CORS.

Ошибка говорила:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://–domain–.cloudfront.net/wp-content/themes/Extra/fonts/ET-Extra.ttf. (Reason: CORS header ‘Access-Control_Allow-Origin’ missing).

Решение заключалось в установке разрешений CORS из ведра s3. Но не по умолчанию. Я изменил их на: 

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://www.domain-here.com</AllowedOrigin>
<AllowedOrigin>https://www.domain-here.com</AllowedOrigin>
<AllowedOrigin>http://domain-here.com</AllowedOrigin>
<AllowedOrigin>https://domain-here.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
</CORSRule>
</CORSConfiguration>

Обязательно смените domain-here на свое собственное доменное имя.

Кроме того, не забудьте очистить кеш / сделать недействительным файл, из-за которого возникла проблема, если это необходимо.

Вы также можете ознакомиться с этим руководством в качестве руководства: https://nabtron.com/fix-access-control-allow-origin-missing/

Я надеюсь, что это помогает.

Вы уверены, что отправляете Authorization заголовок с вашим GET запросы на шрифты?

Если нет, измените политику S3 CORS.

<AllowedHeader>Authorization</AllowedHeader>

к

<AllowedHeader>*</AllowedHeader>.

Этот крохотный промах мучил меня целый месяц.

В консоли AWS - CloudFront - поведение редактирования распределения, в заголовке переадресации установите Белый список и добавьте источник из заголовков белого списка.

@Ariful Haque, пожалуйста, добавьте приведенный ниже код в свой файл .htaccess. это поможет вам.

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>