How do I fix CORS issue when using Ionicons from CDN?

1
votes

I have set up a very basic web project with the following files:

  • index.html
  • styles.css
  • scripts.js

I have included the following line in the head of my html file:

<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">

I am using the icons like so in my html file:

<i class="icon ion-md-menu"></i>

The icon was displaying properly but now i am receiving a CORS error when previewing the project.

Access to font at 'https://unpkg.com/[email protected]/dist/fonts/ionicons.woff2?v=4.5.9-1' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Not sure why i am receiving the error now when it was working just fine before. Any ideas how to fix this issue? Thanks.

1
corsionicons
Try changing the request URL to https://unpkg.com/[email protected]/dist/fonts/ionicons.woff2 — because that’s the URL https://unpkg.com/[email protected]/dist/fonts/ionicons.woff2?v=4.5.9-1 redirects to. But the problem is, the 302 redirect response that server sends has an access-control-allow-origin: https://www.medical-care.net response header, which means the browser will only follow that redirect if the document making the request is hosted under https://www.medical-care.net. - sideshowbarker
https://unpkg.com/[email protected]/dist/css/ionicons.min.css was giving me the same issue (had been using that for a year with no issues). Upgrade to https://unpkg.com/[email protected]/dist/css/ionicons.min.css and the issue was resolved. I guess unpkg are having some config issues? - Tspoon
Updating the cdn to use https://unpkg.com/[email protected]/dist/css/ionicons.min.css as @Tspoon suggested has the icons displaying properly for me. - Nizzy

1 Answers

2
votes

it seems to be unpkg issue to inject those url so when I moved to cloudfare cdn that resolve the issue, https://cdnjs.com/libraries/ionicons