was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

I am building an image classification model(keras) which other users could try, so m using node js to build a server & html, javascript for client side. But when including the files in my script scr @tensorflow/tfjs, I am getting an error : The resource from “http://localhost:3000/files/@tensorflow/tfjs/” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

This is my html file.

<!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>

This is my js file

$("#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>`);
    });
});

So how my model will be loaded to the browser so that any user could predict after uploading the image to classify it?