0

Something strange is happening and I can't figure out why: On my website I have the following CSS for providing Ionicons:

<link rel="stylesheet" href="https://www.domain.tld/themes/places/assets/fonts/ionicons/css/ionicons.min.css">

I decided to move them to CloudFront CDN, now the link looks like this:

<link rel="stylesheet" href="https://[...].cloudfront.net/assets/fonts/ionicons/css/ionicons.min.css">

The link is not broken, the same CSS are now accessible through the CDN, but the Ionicons are gone - I see empty rectangles only. When I change the link back to my server's local CSS file, the icons appear again. Everything else (CSS, JS, Images), which has been moved to the CDN, works as usual - only the Ionicons not. Does someone has an idea where this strange behaviour comes from?

manifestor
  • 1,352
  • 6
  • 19
  • 34
  • 2
    any console errors?,can you access the cdn url of the css? – madalinivascu Aug 06 '18 at 10:45
  • try to link your CDN file without the protocol, so something like this: href="//...." – Matt Aug 06 '18 at 10:46
  • 2
    @madalinivascu yeah, right I forgot to check the console - I get `...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource...` Thanks dude! – manifestor Aug 06 '18 at 10:51
  • In this case, you need to specify this resource header within your server – Toan Lu Aug 06 '18 at 11:06
  • @ToanLu you mean like this: `location ~* \.(eot|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin '*'; }`? – manifestor Aug 06 '18 at 11:12
  • yes, you should add css to the list – Toan Lu Aug 06 '18 at 11:36
  • @ToanLu This is actually not necessary (to add it in the webserver) - you need to set this Header (`Access-Control-Allow-Origin '*'`) in the CDN, only. – manifestor Aug 06 '18 at 12:22
  • So it works perfectly when you set in the CDN only? I have never used a CDN before but based on the configuration on your webserver, the file might be blocked when your application trying to access it. On my nginx engine, I will instead add the CDN link to my `Content-Security-Policy` header – Toan Lu Aug 06 '18 at 12:27
  • 1
    Look at this: https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work - the browser will as the CDN if the origin is allowed. If `Access-Control-Allow-Origin '*'` comes from the CDN or it's backend, then the browser will display it. Setting it only in the CDN/backend is sufficient. – manifestor Aug 06 '18 at 12:32
  • Also you refered to adding CSS - this is not the type that gets blocked. JS (Ajax/XHR) and some fonts get blocked, only (on the browser/client side). – manifestor Aug 06 '18 at 12:35

0 Answers0