Проблема CORS со шрифтами Material Design Icon, размещенными на AWS Cloudfront - PullRequest
Новая
       33

Проблема CORS со шрифтами Material Design Icon, размещенными на AWS Cloudfront

0 голосов
/ 19 февраля 2020

Я пробовал множество онлайн-решений, похоже, ничего не работает.

Справочная информация : у меня приложение Rails 5.2, развернутое на экземплярах AWS EC2, Nginx 1.17.3 в качестве сервер и использование cloudfront в качестве 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) Почему не работают стеллажи?

...