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

问题描述

我正在构建其他用户可以尝试的图像分类模型（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>`);
    });
});

那么如何将我的模型加载到浏览器中，以便任何用户在上传图像后进行预测以对其进行分类呢？

标签： javascriptnode.jstensorflowmime-typestensorflow.js

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

问题描述

解决方案

推荐阅读