时间戳

首页 > 解决方案 > 使用 Font Awesome Kit 时，CORS 策略已阻止访问脚本

html - 使用 Font Awesome Kit 时，CORS 策略已阻止访问脚本

问题描述

我一直在关注 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

任何想法？

标签： htmlfont-awesome

解决方案

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

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

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

推荐阅读