来自 'https://cdnjs.cloudflare.com' 的字体已被 Cross-Origin 资源共享策略阻止加载

Question

我正在尝试从 googleapis 导入字体，但出于某种原因，我在所有字体上都收到以下控制台错误：

来自来源“https://cdnjs.cloudflare.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://mkhosting.kohlercoding.dk”的字体因此不允许访问。响应具有 HTTP 状态代码 404。

我在这里查看了关于此的其他帖子，但没有任何帮助。这是我的 header:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>MKHosting</title>
        <link rel="icon" type="image/png" href="/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="shortcut icon" type="image/png" href="/favicon.png" />
        <!-- <meta http-equiv="refresh" content="0;URL=https://kohlercoding.dk/login-sys/login.php"> -->
        <!-- FontAwesome -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <!-- Active Menu Script -->
        <script src="/assets/js/activemenu.jquery.js"></script>
        <!-- SmoothScroll Script -->
        <script src="/assets/js/smoothscroll-jquery.min.js"></script>
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
        <!-- CSS -->
        <link rel="stylesheet" href="assets/css/style.css">
        <!-- Initialize Materialize Scripts -->
        <script>$(document).ready(function(){
    $(".button-collapse").sideNav();
    $('.parallax').parallax();
    $(".dropdown-button").dropdown({
        hover: false
    });
});</script>
</head>

Answer 1

发现显然是 MaterializeCSS 出了问题，他们的最新更新有一个错误，因此降级一个版本解决了这个问题。

来自 'https://cdnjs.cloudflare.com' 的字体已被 Cross-Origin 资源共享策略阻止加载

Font from origin 'https://cdnjs.cloudflare.com' has been blocked from loading by Cross-Origin Resource Sharing policy

html

.htaccess

fonts

cloudflare