使用 Font Awesome Kit 时,CORS 策略已阻止对脚本的访问

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

提问人:Daniel 提问时间:7/2/2021 更新时间:7/26/2023 访问量:7247

问:

我一直在遵循 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

有什么想法吗?

HTML 字体真棒

评论

0赞 Grumpy 7/2/2021
这是否回答了您的问题 stackoverflow.com/questions/20035101/...
0赞 Daniel 7/2/2021
没有。据我了解,我应该以某种方式将标题添加到我的跨域请求中,但我所拥有的只是一个单行<脚本>标签,尽管基于 Font Awesome 网站它应该可以工作,但它不知何故被阻止了。

答:

2赞 Daniel 7/2/2021 #1

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

快速说明:将脚本放在 head 标签之间,因为它将样式表插入到 html 文件中。

(我在phpStorm中使用JavaScript调试服务器)

0赞 BlackJerry 7/12/2022 #2

我有同样的问题。事实证明,我为我的 font awesome 套件添加了域限制,您可以在 Font Awesome 网站上进行配置。我添加了 mydomain.com,而正确的方法是添加 *.mydomain.com 以允许我网站中的任何子域使用字体真棒脚本。修复错误后,问题就消失了。

您可以在 Font Awesome 帐户中检查套件的域设置,看看它是否是 CORS 阻止问题的原因。

0赞 Ce Anuz 7/26/2023 #3

你没有使用你自己的字体很棒的工具包。这是您使用的从 w3schools 复制的脚本。<script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>

使用你自己的。我使用了上面的脚本,但它不起作用,在字体上创建一个帐户真棒,将提供一个工具包(cdn 链接)。它会起作用的。我用自己的工具包解决了它。