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

【问题标题】：was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)由于 MIME 类型（“text/html”）不匹配（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是文件夹还是脚本文件？

标签： javascript node.js tensorflow mime-types tensorflow.js

【解决方案1】：

我有一个类似的 socket.io 问题，它严格 mime 阻止了 css 文件夹中的样式表。 hacky修复：将被阻止的资源直接放在.html中作为<style></style>；或者你的情况是<script></script>

【讨论】：

【解决方案2】：

脚本src 应该指向一个有效的js 文件，而不是一个文件夹。更改路径files/@tensorflow/tfjs 即可解决问题

【讨论】：