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=".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();
});
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();
});
- I ran into this problem this week (July 2021) while trying to do some basic development in Firefox instead of Chrome. Turning off Enhanced Tracking per @smore4's answer worked for that purpose. In my case, the file being blocked was a JS file compiled from TypeScript. – Matt West Commented Jul 25, 2021 at 17:14
6 Answers
Reset to default 4This 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).
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.
Put that JS file in the same directory as the "importing" html file. I just have solved the same exact problem.
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/">
Had this issue, check if your file location is correct.
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.