html 使用Font Awesome Kit时，CORS策略阻止了对脚本的访问

ikfrs5lh 于 2023-08-01 发布在其他

关注(0)|答案(3)|浏览(108)

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

来源：https://stackoverflow.com/questions/68213832/access-to-script-has-been-blocked-by-cors-policy-while-using-a-font-awesome-kit

3条答案

按热度按时间

esyap4oy1#

看起来像JavaScript调试服务器导致的问题，我正在使用，因为现场编辑插件。当我重新启动服务器时，脚本工作了。此外，如果我只是打开html文件，它工作正常。但是问题总是发生在JavaScript调试服务器的第一次启动时，当它打开浏览器时。
简单说明一下：把脚本放在head标签之间，因为它会在html文件中插入一个样式表。
（我在phpStorm中使用JavaScript Debug服务器）

赞(0）回复(0）举报 2023-08-01

oug3syen2#

我也有同样的问题。事实证明，我添加了我的字体真棒工具包的域限制，您可以在Font Awesome网站上配置。我添加了mydomain.com，而正确的方法是添加 *.mydomain.com以允许我网站中的任何子域使用字体awesome脚本。一旦我修复了错误，问题就消失了。
您可以在您的Font Awesome帐户中检查工具包的域设置，看看它是否是CORS阻止问题的原因。

赞(0）回复(0）举报 2023-08-01

doinxwow3#

你没有用你自己的字体工具包。这是你使用的脚本，从w3schools复制而来。第一个月
用你自己的。我使用了上面的脚本，但它不工作，使一个帐户上的字体真棒将提供一个工具包（cdn链接）。会成功的我用自己的工具箱解决了这个问题。

赞(0）回复(0）举报 2023-08-01