Вопросы Теги

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

Я только что перешел с моего предыдущего CDN на CloudFront для двух своих сайтов. ' http://CLOUDFRONT_HOSTNAME.cloudfront.net/wp-content/themes/Newspaper/images/icons/newspaper.woff?14 " из источника " http://www.example.com " заблокирован CORS policy: заголовок «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>

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

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

ОБНОВЛЕНИЕ

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

Whitelist Headers

2. Недействительны файлы

Invalidated the files

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

Request & Response

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

Ариф

2
задан 5 August 2017 в 20:08
4 ответа

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

Если нет, в вашей политике CORS S3 измените

Authorization

на

* .

Эта крошечная ошибка была исправлена мне на месяц.

2
ответ дан 3 December 2019 в 09:57

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

0
ответ дан 3 December 2019 в 09:57

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

Я использую wordpress и использую s3 bucket-based origin push cdn с амазонским облачным фронтом. Однако файлы шрифтов дают ошибку для 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>

Убедитесь, что домен был изменен на ваше собственное доменное имя.

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

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

Надеюсь, это поможет.

2
ответ дан 3 December 2019 в 09:57

@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>
0
ответ дан 3 December 2019 в 09:57

Теги

Похожие вопросы