CODEWITHSUNDEEP
javascriptjqueryhtmlexpress
michael smith
michael smith

Reputation: 147

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

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();
});

Upvotes: 11

Views: 34103

Answers (6)

Finesite
Finesite

Reputation: 1

I've found that this error is commonly caused by a missing "/" in the file path.

Example:

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

will lead to error. But...

<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css">

will not. Notice the extra "/" at the start of the href.

Upvotes: 0

Filmask
Filmask

Reputation: 21

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

Upvotes: 1

wrongbyte
wrongbyte

Reputation: 334

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.

Upvotes: 2

smoore4
smoore4

Reputation: 4866

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

Upvotes: 4

Shady
Shady

Reputation: 134

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/">

Upvotes: 1

Abdo
Abdo

Reputation: 69

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

Upvotes: 1

Related Questions