使用 Font Awesome 套件时，CORS 策略已阻止对脚本的访问

Question

我一直在关注 Font Awesome 指南如何使用他们的工具包，但是当我在 body 标签的末尾插入这段代码时，出现错误，我无法使用任何图标。

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

这是完整的 HTML 文件：

<!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>

这是错误消息：

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

有什么想法吗？

Answer 1

看起来 JavaScript 调试服务器导致了这个问题，我使用它是因为 Live Edit 插件。当我重新启动服务器时，脚本起作用了。另外，如果我刚刚打开 html 文件，它工作正常。但是问题总是出现在 JavaScript 调试服务器第一次启动时，当它打开浏览器时。

快速说明：将脚本放在 head 标记之间，因为它会将样式表插入 html 文件。

（我在 phpStorm 中使用 JavaScript 调试服务器）

使用 Font Awesome 套件时，CORS 策略已阻止对脚本的访问

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

html

font-awesome