错误：由于 MIME 类型（“text/html”）不匹配而被阻止（X-Content-Type-Options: nosniff）答案

【问题标题】：Error: Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)错误：由于 MIME 类型（“text/html”）不匹配而被阻止（X-Content-Type-Options: nosniff）
【发布时间】：2019-11-04 15:08:39
【问题描述】：

我正在尝试使用 express 和 ajax 在测试站点上测试一些 api 调用，但是如果我将 js 脚本分离到它自己的文件中，则会出现以下错误，

来自“http://localhost:9000/userProfileFunctions.js”的资源是由于 MIME 类型（“text/html”）不匹配而被阻止 (X-Content-Type-Options: nosniff)。

如果我将所有内容都保存在同一个 html 文件中，它会起作用，但这更像是解决问题的创可贴。我什至将 express app.use 标头设置为“X-Content-Type-Options: nosniff”，但它仍然不起作用

main.html

<html>

<head>
    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
    </script>

    <script src="userProfileFunctions.js" ></script>

</head>
<body>
    <form>
        <h4>GET REQUEST USERS PROFILE</h4>
        UUID: <input id="getUserInput" type="text" name="UUID"><br>
        <input id="getUserProfile" type="button" value="submit">
    </form>
</body>
</html>

app.js

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

【问题讨论】：

本周（2021 年 7 月）我在尝试使用 Firefox 而不是 Chrome 进行一些基本开发时遇到了这个问题。根据@smore4 的回答关闭增强跟踪功能就是为此目的。在我的例子中，被阻止的文件是一个从 TypeScript 编译的 JS 文件。

标签： javascript jquery html express

【解决方案1】：

这不是一个非常技术性的答案，但即使生产版本有效，我在测试时也遇到了同样的错误。当我在 Firefox（开发者版）中关闭增强跟踪保护时，错误消失了。

【讨论】：

【解决方案2】：

这是因为文件的位置已更改。检查路径并将脚本的src 标记更新为正确的位置。

/ChangeLocation/userProfileFunctions.js

示例：

<script type="application/javascript" src="/NewLocation/userProfileFunctions.js/">

【讨论】：

【解决方案3】：

将该 JS 文件放在与“导入”html 文件相同的目录中。我刚刚解决了同样的问题。

【讨论】：

【解决方案4】：

对我来说，它可以将所有 JS 文件放入包含静态文件的文件夹中，并在 express 文件中添加以下行： app.use(express.static(__dirname + '/static'));

如果有人遇到同样的问题，我相信这是一个不错的选择。

【讨论】：