Итак, я настроил свое приложение Ruby on Rails для использования CloudFront в качестве CDN. Ресурсы JavaScript, CSS и изображений, похоже, правильно обслуживаются через CloudFront, но шрифты не работают с проблемой CORS -

Access to Font at 'https://abcdefghikl.cloudfront.net/assets/fonts/din-regularalternate-webfont-79090091223f0c54d7042ef125ad4f26.ttf' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://myapp.com' is therefore not allowed access.

Есть идеи, как я могу это исправить?

Я также внес в белый список следующие заголовки на AWS CloudFront. Кстати, шрифты обслуживаются с моего сервера Rails (не с S3).

enter image description here

1
Steve Robinson 13 Мар 2018 в 23:50

2 ответа

Лучший ответ

Вот пример приложения Rails 5.2, которое обслуживает пользовательский шрифт через CloudFront. Он работает на Heroku с надстройкой Edge, но применяется к любой настройке Rails / CloudFront.

https://github.com/nzoschke/edgecors

Сначала вам нужно настроить CloudFront для пересылки заголовка браузера Origin.

Затем используйте гем rack-cors и добавьте конфигурацию в свой Rails config/application.rb:

module EdgeCors
  class Application < Rails::Application
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins %w[
          http://edgecors.herokuapp.com
          https://edgecors.herokuapp.com
        ]
        resource '/assets/*', headers: :any, methods: [:get, :post, :options]
      end
    end
  end
end

Измените белый список происхождения на URL своего веб-сайта.

Теперь запросы от https://edgecors.herokuapp.com к шрифту в https://abcdefghikl.cloudfront.net/assets/fonts/din-regularalternate-webfont-79090091223f0c54d7042ef125ad4f26.ttf будут отправляться обратно в исходное приложение Rails.

Промежуточное ПО анализирует заголовок Origin и добавляет заголовок Access-Control-Allow-Origin: https://edgecors.herokuapp.com к ответу, если он находится в белом списке.

Браузер успешно загрузит шрифт. И CloudFront будет кешировать.

0
Noah Zoschke 26 Дек 2018 в 23:21

Быстрый ответ - нельзя. Это требует изменений на стороне сервера - вы ничего не можете сделать в коде вашего клиента (браузера). CORS применяется только к запросам AJAX (с использованием скрытой выборки) и шрифтам.

Но если серверная часть находится под вашим контролем, проверьте, явно ли вы добавляете заголовки ответа CORS (Access-Control-Allow-Origin и т. Д.) В свой ответ от вашего сервера Rails.

Если нет, вам нужно будет фактически ДОБАВИТЬ их в ответ (либо на сервере Rails, либо в самой CDN). Внесение их в белый список просто позволяет им пройти (и может повлиять на кеширование), но их необходимо явно добавить в ответ


Интересный факт: CORS был разработан СПЕЦИАЛЬНО, чтобы люди не могли получить доступ к шрифтам с «фабрик шрифтов» или загрузить их ...

1
Steve Robinson 16 Мар 2018 в 11:37