MIME Type Mismatch in Express

Question

I'm trying to load a page that uses JS (in a different location) from Express. However when I load the page, I always get a MIME type mismatch, like the following:

The resource from “http://localhost:3000/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/datamaps/dist/datamaps.world.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

I've seen that the error comes as the script element rejects those responses with incorrect MIME types if the X-content option of nosniff is passed. How can I either:

Fix the content response to send the correct header (javascript)
Remove the nosniff option

lucidmap.html

<!DOCTYPE html>
<html>
<script src="/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/d3/build/d3.min.js"></script>
<script src="/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/topojson/dist/topojson.min.js"></script>
<script src="/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/datamaps/dist/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<script>
    var map = new Datamap({element: document.getElementById('container')});
</script>

</body>
</html>

Express.js code snippet

app.get('/lucidmap', function(req, res) {
    res.sendFile('/home/lucid-user/lucid/lucidApp-ubuntu/views/app/lucidmap.html');
});

Browser used is Mozilla 77.0.1 64-bit for Ubuntu.

@eol I just call the script file from the HTML, you can't do that? — Thomas C, Aug 28 '20 at 14:03
Well, when loading `lucidmap.html`, your browser will request the three `.js` files (from your ` — eol, Aug 28 '20 at 14:07
@eol oh, so I'll need to serve the files using Express as well, similar to this: https://expressjs.com/en/starter/static-files.html — Thomas C, Aug 28 '20 at 14:16
If you need help setting up the static-serving I can post an answer - let me know. — eol, Aug 28 '20 at 15:37
Check this thread: [express setting content type based on path file](https://stackoverflow.com/questions/7109732/express-setting-content-type-based-on-path-file) — caucus, Oct 12 '21 at 06:11
Check this thread for answers: [express-setting-content-type-based-on-path-file](https://stackoverflow.com/questions/7109732/express-setting-content-type-based-on-path-file) — caucus, Oct 12 '21 at 06:19

score 1 · Answer 1 · answered Feb 02 '21 at 23:18

It would be more helpful to see the Express code, where you include the static/public directory.

Here is how it should be done: In your express code write something like:

app.use("/public", express.static("/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/datamaps/dist"));

Add all the links you want to have in the "/public" directory as follows in your express code:

...
app.use("/public", express.static("/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/datamaps/dist"));
app.use("/public", express.static("/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/topojson/dist/"));
...

Then you only need to write in your HTML Code:

<script src="/public/datamaps.world.min.js"></script>
<script src="/public/topojson.min.js"></script>

Then another tip: Best practice is to place all your tags inside the tag, at the very end, just before . It should look like this:

<body>
    .
    .
    <script src="/public/datamaps.world.min.js"></script>
    <script src="/public/topojson.min.js"></script>
</body>

Placing the script tag at the end of the body is far from a best practice. It's a terrible practice, if you need the script to load after the body, you should use the defer or async attributes. — Marcelo Origoni, Feb 08 '22 at 21:51

MIME Type Mismatch in Express

1 Answers1