Access to script has been blocked by CORS policy while using a Font Awesome Kit

Question

I've been following the Font Awesome guides how to use their kits, but when I inserted this code at the end of my body tag, I get an error, and I can't use any icons.

<script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>

Here is the full HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="icon" href="imgs/favicon.ico" />
    <link rel="apple-touch-icon" href="imgs/logo192.png" />
    <link rel="stylesheet" type="text/css" href="scss/main.css">
    <title>My title</title>
</head>
<body>
    <div>Facebook<i class="fab fa-facebook"></i></div>
    <script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>
</body>
</html>

And here is the error message:

Access to script at 'https://kit.fontawesome.com/a4c00a89bc.js' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://kit.fontawesome.com/a4c00a89bc.js net::ERR_FAILED

Any idea?

does this answer your question https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i — Grumpy, Jul 01 '21 at 16:41
Not really. As far as I understand, I should add headers somehow to my cross origin request, but all I have is a oneliner — Daniel, Jul 01 '21 at 17:00

Daniel · Accepted Answer · 2021-07-01T17:38:34.353

It looks like JavaScript Debug server caused the problem, that I was using because of the Live Edit plugin. As I restarted the server, the script worked. Also, if I just opened the html file, it worked properly. But the problem always occur at first start of the JavaScript Debug server, when it opens up the browser.

A quick note: put the script rather between the head tag, because it inserts a stylesheet into the html file.

(I am using JavaScript Debug server in phpStorm)

Access to script has been blocked by CORS policy while using a Font Awesome Kit

1 Answers1