2

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?

Daniel
  • 391
  • 4
  • 17
  • 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

3 Answers3

2

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)

Daniel
  • 391
  • 4
  • 17
0

I had the same problem. It turns out that I added domain restriction of my font awesome kit, which you can configure on the Font Awesome website. I added mydomain.com, while the correct way is to add *.mydomain.com to allow any subdomain in my website to use the font awesome script. The problem went away once I fixed the error.

You can check the domain setting of your kit in your Font Awesome account to see if it is the cause of the CORS blocking problem.

BlackJerry
  • 78
  • 4
0

You didn't use your own font awesome kits. Here is the script you used copied from w3schools. <script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>

Use your own. I used the above script but it does not work, make an account on font awesome the will provide a kit (cdn link). It will work. I solved it by using my own kit.

Ce Anuz
  • 1
  • 1