Проблема CORS со шрифтами значков Material Design, размещенными на AWS Cloudfront
Я пробовал множество решений в Интернете, похоже, ничего не работает.
Предыстория: у меня есть приложение Rails 5.2, развернутое на экземплярах AWS EC2, Nginx 1.17.3 в качестве сервера и использование облачного интерфейса в качестве CDN - все мои активы там.
Ошибка (из консоли Chrome) - Chrome не загружает веб-шрифты из CDN:
Access to font at
'https://xxxxx.cloudfront.net/assets/materialdesignicons-webfont-7ff345c2.woff2' from
origin 'https://example.com' has been
blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
Моя настройка:
1) Nginx default.conf:
location /assets {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
alias /home/deploy/rails/myapp/current/public/assets;
autoindex on;
}
location @app {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-
Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
proxy_pass http://app;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
}
Результат при использовании cURL для тестирования:
> GET / HTTP/1.1
> Host: www.example.com
> User-Agent: curl/7.55.1
> Accept: */*
>
< HTTP/1.1 302 Found
< Date: Wed, 19 Feb 2020 13:07:42 GMT
< Content-Type: text/html; charset=utf-8
< Transfer-Encoding: chunked
< Connection: keep-alive
< Server: nginx/1.17.3
< Location: https://www.example.com/users/sign_in
< Cache-Control: no-cache
< Set-Cookie: _railsapp_session=xxxxxxxx2; path=/; HttpOnly
< X-Request-Id: aa047a91-80e0-43f4-95f6-e62984c0294d
< X-Runtime: 0.003899
< Vary: Origin
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, POST, OPTIONS
< Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range
< Access-Control-Expose-Headers: Content-Length,Content-Range
cURL, чтобы получить шрифт прямо из облачного интерфейса:
GET /assets/materialdesignicons-webfont-xwxx2223ee3d3d.woff2 HTTP/1.1
> Host: xxxxxxx.cloudfront.net
> User-Agent: curl/7.55.1
> Accept: */*
>
< HTTP/1.1 200 OK
< Content-Type: application/font-woff2
< Content-Length: 235176
< Connection: keep-alive
< Date: Wed, 19 Feb 2020 13:10:28 GMT
< Server: nginx/1.17.3
< Last-Modified: Tue, 01 Oct 2019 13:56:17 GMT
< ETag: "xx-396a8"
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, POST, OPTIONS
< Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range
< Access-Control-Expose-Headers: Content-Length,Content-Range
< Accept-Ranges: bytes
< X-Cache: Miss from cloudfront
< Via: 1.1 89c6a.cloudfront.net (CloudFront)
< X-Amz-Cf-Pop: CPT50
< X-Amz-Cf-Id: K6zq2-ujEixxwnRCOajq-xxx-8I2bynO22o3u3NbVchpu1PA==
<
На стороне облака. Я внес в белый список заголовок "Access-Control-Allow-Origin" в разделе "Кэш на основе выбранных заголовков запросов" на вкладке "поведения".
Даже со всем этим я все еще получаю No 'Access-Control-Allow-Origin'
header is present on the requested resource.
ошибка в Chrome, и мои шрифты не работают.
Опять же, я часами пробовал разные решения, в том числе с использованием Rack::CORS, ничего не помогло.
Любой указатель приветствуется.
Другие онлайн-предложения, которые я пробовал до сих пор (ничего не работает):
1) Ресурсы Rails Cloudfront fontawesome CORS 2) https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/ 3) https://forums.aws.amazon.com/thread.jspa?messageID=619662 4) https://github.com/cyu/rack-cors/issues/33 5) Почему не работает стэк-корс?