Issues loading Ionicons 7.1.0 from unpkg.com (CORS error and 500 Internal Server Error)

Ionic Framework
1

Hi everyone,

I’ve been using Ionicons 7.1.0 in my project without any issues, and everything was working fine until recently. I’ve been including the following script tags in my index.html to load Ionicons from unpkg.com:

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

However, now I am encountering the following errors:

-Error 1 (CORS-related):

Access to script at 'https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js' from origin 'https://mywebpage' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

-Error 2 (500 Internal Server Error):

GET https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js net::ERR_FAILED 500 (Internal Server Error)
  • Has anyone else experienced similar issues with Ionicons 7.1.0 from unpkg.com recently?
  • Could this be a temporary issue with the CDN, or is there something I should check in my setup?
  • Are there any alternative CDNs or solutions I can try for this version, or should I downgrade to an earlier version of Ionicons?

Any help or insights would be greatly appreciated!

Thanks!

2

I have the same problem pls help

3

Is it still not working? Loading in the browser works and gives the following response headers:

access-control-allow-origin: *
access-control-expose-headers: *
cross-origin-resource-policy: cross-origin
4

Thanks for the response.

Just to clarify, when I access the URL directly (https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js) in the browser, it works without any issues.

However, the problem arises when I try to load it from my application, where I encounter a CORS issue.

It’s strange because nothing has changed on our side, so this issue seems to have appeared unexpectedly. It seems that the CORS policy is causing the problem when loading the file from my site, even though direct access works fine.

5

Hello, i found a solution. In the github repository there is a new version. Just change cdn

<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"></script>
2 Likes
6

In my case I got a 500 error even when accessing the resource directly from the browser. Changing the repo works fine.

7

The problem seems to come from unpkg. You can see reports about many libraries here: https://github.com/unpkg/unpkg/issues