Обновление от 10 сентября 2014 г .:
Вам больше не нужно делать какие-либо взломы строки запроса ниже, поскольку Cloudfront теперь правильно поддерживает CORS. См. Http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/ и этот ответ для получения дополнительной информации: https://stackoverflow.com/a/25305915/308315
Хорошо, я наконец-то заставил шрифты работать, используя конфигурацию ниже, с небольшой настройкой из примеров в документации.
Мои шрифты размещены на S3, но находятся на облачном сервере.
Я не уверен , почему это работает, я думаю, возможно , что <AllowedMethod>
GET
и <AllowedHeader>
Content-*
требуется.
Если кто-либо, владеющий конфигурацией Amazon S3 CORS, сможет пролить свет на это, мы будем очень признательны.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://mydomain.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
редактировать:
Некоторые разработчики сталкиваются с проблемами, связанными с кешированием Access-Control-Allow-Origin
заголовка Cloudfront . Эта проблема решена сотрудниками AWS по ссылке ( https://forums.aws.amazon.com/thread.jspa?threadID=114646). ) и прокомментирована @ Jeff-Atwood.
Из связанного потока рекомендуется в качестве временного решения использовать строку запроса для различения вызовов из разных доменов. Я воспроизведу здесь сокращенный пример.
Используем curl
для проверки заголовков ответов:
Домен A: a.domain.com
curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com
Заголовки ответа из домена A:
Access-Control-Allow-Origin: https://a.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront
Домен B: b.domain.com
curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com
Заголовки ответа из домена B:
Access-Control-Allow-Origin: http://b.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront
Вы заметите, что Access-Control-Allow-Origin
он вернул разные значения, которые прошли кэширование Cloudfront.
Access-Control-Allow-Origin
заголовок кэшируется и делает CORS недействительным, когда последующий запрос выполняется через другой поддомен?После некоторой настройки мне кажется, что это работает без взлома строки запроса. Подробнее здесь: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorS3Origin.html#RequestS3-cors
Я собираюсь пройти всю настройку, чтобы было легко увидеть, что я сделал, надеюсь, это поможет другим.
Общая информация: я использую приложение Rails, в котором есть гем asset_sync для размещения ресурсов на S3. Сюда входят шрифты.
В консоли S3 я щелкнул по своей корзине, свойствам и «редактировать конфигурацию cors», здесь:
Внутри текстового поля у меня есть что-то вроде:
Затем на панели Cloudfront ( https://console.aws.amazon.com/cloudfront/home ) я создал дистрибутив, добавил источник, указывающий на мою корзину S3.
Затем добавил поведение для пути по умолчанию, чтобы указать на исходную точку на основе S3, которую я установил. Я также нажал на заголовки белого списка и добавил
Origin
:Сейчас происходит следующее, что я считаю правильным:
1) Убедитесь, что заголовки S3 установлены правильно
2) Убедитесь, что Cloudfront работает с заголовками
(Обратите внимание, что вышеупомянутое было пропущено из облачного интерфейса, потому что эти файлы кэшируются в течение 180 секунд, но то же самое работало с обращениями)
3) Нажмите cloudfront с другим источником (но тем, который разрешен в CORS для ведра S3) -
Access-Control-Allow-Origin
не кэшируется! ура!Обратите внимание, что домен был успешно изменен без взлома строки запроса.
Когда я меняю заголовок Origin, кажется, что всегда
X-Cache: Miss from cloudfront
при первом запросе появляется сообщение, а затем я получаю ожидаемыйX-Cache: Hit from cloudfront
PS Стоит отметить, что при выполнении curl -I (заглавная I) НЕ будут отображаться заголовки Access-Control-Allow-Origin, поскольку это только HEAD, я делаю -i, чтобы сделать его GET и прокручивать вверх.
источник
Origin
из средств просмотра, чтобы Cloudfront кэшировал объект на основе этого заголовка (и пересылал серверные заголовки CORS обратно пользователю)Мои шрифты обслуживались правильно до последнего нажатия на Heroku ... Я не знаю почему, но подстановочный знак в разрешенном источнике CORS перестал работать. Я добавил все свои домены prepro и pro в политику CORS в настройках корзины, и теперь это выглядит так:
ОБНОВЛЕНИЕ: добавьте
http://localhost:PORT
тожеисточник
Что ж, в документации указано, что вы можете использовать конфигурацию как «подресурс cors в вашем сегменте». Я понял, что это означает, что я создам файл с именем «cors» в корне моей корзины с конфигурацией, но это не сработает. В конце концов мне пришлось войти в область администрирования Amazon S3 и добавить конфигурацию в
properties
диалоговом окне моей корзины.S3 мог бы использовать лучшую документацию ...
источник
В конфигурации Amazon S3 CORS (S3 Bucket / Permissions / CORS), если вы используете это:
CORS хорошо работает с файлами Javascript и CSS, но не работает с файлами шрифтов .
Вы должны указать домен, чтобы разрешить CORS использовать шаблон, выраженный в ответе @VKen: https://stackoverflow.com/a/25305915/618464
Итак, используйте это :
Не забудьте заменить «mydomain.com» на свой домен.
После этого сделайте недействительным кеш CloudFront (CloudFront / Invalidations / Create Invalidation), и он будет работать.
источник
В моем случае я не определил пространство имен и версию XML в конфигурации CORS. Определение тех, которые работали.
Изменено
в
источник
Есть способ лучше и проще!
Лично я предпочитаю использовать свои поддомены DNS для решения этой проблемы. Если мой CDN находится за cdn.myawesomeapp.com вместо sdf73n7ssa.cloudfront.net, тогда браузеры не будут волноваться и блокировать их как проблемы междоменной безопасности.
Чтобы указать свой субдомен на домен AWS Cloudfront, перейдите в панель управления AWS Cloudfront, выберите дистрибутив Cloudfront и введите свой субдомен CDN в поле Альтернативные доменные имена (CNAME). Что-то вроде cdn.myawesomeapp.com подойдет.
Теперь вы можете перейти к своему провайдеру DNS (например, AWS Route 53) и создать CNAME для cdn.myawesomeapp.com, указывающую на sdf73n7ssa.cloudfront.net.
http://blog.cloud66.com/cross-origin-resource-sharing-cors-blocked-for-cloudfront-in-rails/
источник
Эта конфигурация сработала для меня. Я могу перечислять объекты, получать, обновлять и удалять.
источник
Простое решение
источник
particular domain
илиall domains
)Перезапуск моего весеннего загрузочного приложения (сервера) решил проблему для меня.
Я правильно настроил CORS на S3. Curl давал правильный ответ с заголовком origin. Safari правильно загружал шрифт. Только хром не захотел принять CORS.
Не уверен, что именно вызвало такое поведение. Должно быть какое-то отношение к If-modified-Since
источник
Это связано не со шрифтами, а с изображениями, это может быть крайний случай, но, как это случилось со мной, это может случиться с другим. Я оставлю это здесь, надеясь, что это кому-то поможет:
Если вы находитесь в сценарии «Я сделал все, что они сказали, но он все равно не работает», вероятно, это проблема, связанная с кешем в Chrome и Safari. Предположим, у вашего сервера есть правильный набор конфигурации CORS:
а в Firefox все работает нормально, а в Chrome и Safari - нет. Если вы обращаетесь к своему удаленному пути к изображению как из простого
<img src="http://my.remote.server.com/images/cat.png">
тега, так и из элемента src js Image, например, следующим образом:Вы можете получить
No 'Access-Control-Allow-Origin'
ошибку в Chrome и Safari. Это происходит потому, что первый<img>
каким-то образом портит кеш браузера, и когда вы позже пытаетесь получить доступ к тому же изображению (в элементе изображения в коде), оно просто ломается. Чтобы избежать этого, вы можете добавить фиктивный параметр GET к одному пути .src, чтобы заставить браузер повторно запрашивать изображение и избегать использования кеша, например:источник
Ну конечно; естественно. Firefox поддерживает CORS для шрифтов, как того требует спецификация http://dev.w3.org/csswg/css3-fonts/#allowing-cross-origin-font-loading.
источник