由于 MIME-type 冲突 ("application/json") (X-Content-type-options: nosniff)，资源被阻止

Question

我刚刚为我和我的团队正在实施的 Web 应用程序设计了一个页脚。当我加载 html 文件并访问它们时，页脚看起来不错。然而，当我的一个队友也这样做时，页脚根本没有样式属性，而是出现在页面的右侧。

调试起来相当困难，因为它在我这边有效，但我收到了标题中的错误消息。

这是我的 html 代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="Hugo 0.83.1">

    <title>Central SignIn</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sign-in/">

    <link rel="stylesheet"
          href=
                  "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          integrity=
                  "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
          crossorigin="anonymous" />
    <script src=
                    "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity=
                    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src=
                    "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
            integrity=
                    "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
            crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="footerSmallPage.css" media="all">
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <link href="https://getbootstrap.com/docs/5.0/examples/sign-in/signin.css" rel="stylesheet">
</head>
<body class="text-center">

<main class="form-signin">

    <form name="f">
        <h1 class="h3 mb-3 fw-normal">Central Service Sign in</h1>

        <!-- Email input field -->
        <div class="form-floating">
            <input name= "username" type="email" class="form-control"
            id="floatingInput"
                   placeholder="name@example.com">
            <label for="floatingInput">Email address</label>
        </div>

        <!-- Password input field -->
        <div class="form-floating">
            <input name="password" type="password" class="form-control"
                   id="floatingPassword" placeholder="Password">
            <label for="floatingPassword">Password</label>
        </div>

        <!-- Login button -->
        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>

    </form>

    <form action="/home" method="get">
        <input type="submit" name="Go to the overview" id="overviewButton" />
    </form>
        <!-- Button for Navigation - Opens modal on click -->
            <button type="button"
                    class="btn btn-dark al"
                    data-toggle="modal"
                    data-target="#navigation">
                Navigation
            </button>

    <!-- Modal initialization -->
    <div class="modal fade"
         id="navigation">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">
                        Navigation</h2>
                    <button type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">
                              X</span>
                    </button>
                </div>
                <!--Modal Text-->
                <div class="modal-body">
                    <p style="font-size:20px"> Copyright © 2021 </p>
                    <p> Gruppe20 Web & Data Engineering </p>
                    <p> All rights reserved. </p>
                    <br>
                    <p style="font-size:20px;"> <h3> Authors: </h3> </p>
                    <p> Emily Vorderwuelbeke </p>
                    <p> Severin Burghart </p>
                    <p> Ludwig Loggenkamp </p>
                </div>
                <div class="modal-footer">

                </div>
            </div>
        </div>
    </div>

</main>
<footer class="footer">
    <br>
    <br>
    <p> Copyright © 2021 - Gruppe20 Web & Data Engineering - All rights reserved </p>
    <p> Authors: Emily Vorderwuelbeke - Severin Burghart - Ludwig Roggenkamp</p>
</footer>
</body>
<script>
    function handleSubmit(event) {
        event.preventDefault();
        const data = new FormData(event.target);
        const value = Object.fromEntries(data.entries());

        const options = {
            method: 'POST',
            body: JSON.stringify(value)
        };
        console.log(value);
        console.log(options)
        fetch( 'login', options )
            .then( response => document.cookie =
                "Authorization="+response.headers.get("Authorization")+";path=/;expiration=0;");

    }
    const form = document.querySelector('form');
    form.addEventListener('submit', handleSubmit);

</script>
</html>

这里是 css 文件（它与 html 页面位于同一文件夹中）

@media screen and (max-width: 768px) {
    .footer{
        visibility: hidden;
        display: none;
    }
}

.footer {
    position: absolute;
    bottom: 0;
    padding-bottom: 100px;
    width: 100%;
    overflow: hidden;
    color: black;
    height: 177px;
    text-align: center;
    background-image: url(footer-image.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

Answer 1

您在此处指定了错误的文件路径。

<link rel="stylesheet" type="text/css" href="footerSmallPage.css" media="all">

实际上会是这样：

<link rel="stylesheet" type="text/css" href="./footerSmallPage.css" media="all">

由于 MIME-type 冲突 ("application/json") (X-Content-type-options: nosniff)，资源被阻止

Resource blocked due to MIME-type conflict ("application/json") (X-Content-type-options: nosniff)

html

css

footer