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

Posted

技术标签:

【中文标题】错误：由于 MIME 类型（“text/html”）不匹配而被阻止（X-Content-Type-Options: nosniff）【英文标题】：Error: Blocked due to MIME type (“text/html”) mismatch (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 文件。 【参考方案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'));

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

【讨论】：

以上是关于错误：由于 MIME 类型（“text/html”）不匹配而被阻止（X-Content-Type-Options: nosniff）的主要内容，如果未能解决你的问题，请参考以下文章

收到错误：MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且使用 DJANGO PYTHON 启用了严格的 MIME 检查

CSS/JS 在 HTML 中不起作用，错误：MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型

无法加载 Angular 生产构建 - 由于不允许的 MIME 类型（“text/html”），加载模块被阻止

由于不允许的 MIME 类型（“text/html”），ASP Net Core 内部的 Angular 8 被阻止

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

由于 MIME 类型 (“text/html”) 不匹配 (X-Content-Type-Options: > nosniff)，资源被阻止