由于 MIME 类型（“text/html”）不匹配（X-Content-Type-Options: nosniff）而被阻止
Posted
技术标签:
【中文标题】由于 MIME 类型（“text/html”）不匹配（X-Content-Type-Options: nosniff）而被阻止【英文标题】：was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) 【发布时间】：2020-11-13 13:57:40 【问题描述】：我正在构建一个其他用户可以尝试的图像分类模型（keras），所以我使用节点 js 来构建服务器和 html，客户端的 javascript。但是当在我的脚本 scr @tensorflow/tfjs 中包含文件时，我收到一个错误：来自“http://localhost:3000/files/@tensorflow/tfjs/”的资源由于 MIME 类型而被阻止（“text/ html”) 不匹配 (X-Content-Type-Options: nosniff)。
这是我的 html 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="files/bootstrap.min.css">
<title>ur_model_ur_way</title>
</head>
<body>
<main>
<div class="container mt-5">
<div class="row">
<div class="col-12">
<div class="progress progress-bar progress-bar-striped progress-bar-animated mb-2">Loading Model</div>
</div>
</div>
<div class="row">
<div class="col-6">
<input id="image-selector" class="form-control border-0" type="file">
</div>
<div class="col-6">
<button id="predict-button" class="btn btn-dark float-right">Predict</button>
</div>
</div>
<hr>
<div class="row">
<div class="col">
<h2 class="ml-3">Predictions</h2>
<ol id="prediction-list"></ol>
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<h2 class="ml-3">Image</h2>
<img id="selected-image" class="ml-3" src="" />
</div>
</div>
</div>
</main>
<script src="files/jquery.slim.min.js"></script>
<script src="files/popper.min.js"></script>
<script src="files/@tensorflow/tfjs"></script>
<script src="files/@tensorflow/tfjs-node"></script>
<script src="imagenet_classes.js"></script>
<script src="files/bootstrap.min.js"></script>
<script src="predict.js"></script>
</body>
</html>
这是我的 js 文件
$("#image-selector").change(function ()
let reader = new FileReader();
reader.onload = function ()
let dataURL = reader.result;
$('#selected-image').attr("src", dataURL);
$("#prediction-list").empty();
let file = $("#image-selector").prop('files')[0];
reader.readAsDataURL(file);
);
// let handler;
let model;
(async function()
// handler = tfnode.io.fileSystem('uploads/model.json');
model = await tf.loadModel('uploads/model.json');
$('.progress-bar').hide();
)();
$("predict-button").click(async function ()
let image = $('#selected-image').get(0);
let tensor = tf.fromPixels(image)
.resizeNearestNeighbor([224,224])
.toFloat()
.expandDims();
let predictions = await model.predit(tensor).data();
let top5 = Array.from(predictions)
.map(function (p, i)
return
probability: p,
className: IMAGENET_CLASSES[i]
;
).sort(function (a, b)
return b.probability - a.probability;
).slice(0, 5);
$("#prediction-list").empty();
top5.forEach(function (p)
$('#prediction-list').append(`<li>$p.className: $p.probability.toFixed(6)</li>`);
);
);
那么我的模型将如何加载到浏览器中，以便任何用户在上传图片后都可以预测以对其进行分类？
【问题讨论】：
files/@tensorflow/tfjs是文件夹还是脚本文件？
【参考方案1】：
我有一个类似的 socket.io 问题，它严格 mime 阻止了 css 文件夹中的样式表。 hacky修复：将被阻止的资源直接放在.html中作为<style></style>；
或者你的情况是<script></script>
【讨论】：
【参考方案2】：脚本src 应该指向一个有效的js 文件，而不是一个文件夹。更改路径files/@tensorflow/tfjs 即可解决问题
【讨论】：
以上是关于由于 MIME 类型（“text/html”）不匹配（X-Content-Type-Options: nosniff）而被阻止的主要内容，如果未能解决你的问题，请参考以下文章
由于 MIME 类型（“text/html”）不匹配（X-Content-Type-Options: nosniff）而被阻止
由于 MIME 类型 (“text/html”) 不匹配 (X-Content-Type-Options: > nosniff)，资源被阻止
错误：由于 MIME 类型（“text/html”）不匹配而被阻止（X-Content-Type-Options: nosniff）