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

user_9557809 0
Viewed 17296

I am trying to test some api calls with a test site using express and ajax but if I separate the js script into its own file it gives the following error,

The resource from “http://localhost:9000/userProfileFunctions.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

It works if I keep everything in the same html file but thats more like a bandaid to the problem. I have even set the express app.use header to "X-Content-Type-Options: nosniff" but it still doesn't work

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();
});
express html jquery javascript
5 Answers

This is not a very technical answer, but I was getting this same error with testing even though the production version worked. The error went away when I switched Off Enhanced Tracking Protection in Firefox (Developer Edition).

enter image description here

user_11436810

It's because of the file's location has been changed. Check the path and update your src tag of your script with the correct location.

/ChangeLocation/userProfileFunctions.js

example:

<script type="application/javascript" src="/NewLocation/userProfileFunctions.js/">
user_81324850

For me, it worked putting all JS files into a folder with the static files and adding the following line in the express file: app.use(express.static(__dirname + '/static'));

I believe it's a good option to try if someone is facing the same problem.

user_168861350

Put that JS file in the same directory as the "importing" html file. I just have solved the same exact problem.

user_96235660

Had this issue, check if your file location is correct.

user_156241500
Related