javascript - Getting MIME type not supported - Stack Overflow

admin管理员组

文章数量:1333386

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?

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?

• javascript
• css
• node.js
• express

Share Improve this question Follow asked Feb 13, 2018 at 9:55 Alpit AnandAlpit Anand 1,25844 gold badges2222 silver badges4242 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./example-event. In that case the relative path used for the CSS will resolve to the absolute path https://example./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./eventname/example-event. Now the URL of the CSS file is resolved to https://example./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 remend the first one as it is easier to maintain.

If you get that error that mean your folder is not in the public directory. Move it to the public directory and change the route of your files to (/style.css)

本文标签： javascriptGetting MIME type not supportedStack Overflow