Getting MIME type not supported

Question

I am having a very strange issue, however, i have resolved it but wanted to know why. I am using node.js with express.
In my server.js file i have written route code like:

app.get('/eventname/:event', (req, res) => {
res.render('event.hbs', {
    name: req.user.displayName
});
})

There is no specific "eventname" route when i tried to load pages, it loads successfully just it doesn't loads my .css files giving MIME type not supported error. However, when i removes the "eventname"

app.get('/:event', (req, res) => {
res.render('event.hbs', {
    name: req.user.displayName
});
})

Everything started wroking fine. Why is this happening, am i doing something wrong in express?

Answer 1

I'm not 100% certain, but I'm pretty sure that this happens because the <link> tag you use to import the CSS file uses a relative path.

---

Let's imagine it looks like this ...

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

... and the URL of the event page you're visiting is https://example.com/example-event. In that case the relative path used for the CSS will resolve to the absolute path https://example.com/styles.css which is – I assume – the correct path.

Now imagine that you're instead using the first code example and the URL is https://example.com/eventname/example-event. Now the URL of the CSS file is resolved to https://example.com/eventname/styles.css which is not the correct path.

The path, however, is still handled by the web server because it matches the URL wildcard you use for the event pages – /eventname/:event. That causes your application to render the event.hbs template which is obviously served with the MIME type text/html and not text/css as expected, hence the error MIME type not supported.

---

To fix this problem, you can:

• use an absolute (relative to your application's domain) path (/styles.css – note the /)
• use a valid relative path for every page (../styles.css in case of /eventname/:event)

Although both options work, I highly recommend the first one as it is easier to maintain.