Problem with routing when I put some route parameters-CodePudding

When I define a route parameter in my browser URL, the route that is connected with that URL sends me errors with the routing of the public folder (that contains my CSS, JS, etc.).

The structure of the app is like this:

app
|
|-- public
|      └-- css
|           └-- profile.css
|
|-- views
|     └-- profile.html
|
|-- server.js

In my server.js I have this:

// server.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.set('views', path.join(__dirname, './views'))

app.get('/profile/:userId', (req, res) => {
    res.sendFile(path.join(__dirname, './views/profile.html'))
})

app.listen(PORT, () => {
    console.log(`Listening at port: ${PORT}`)
})

On my profile.html I have linked the CSS file like this:

<link rel="stylesheet" href="./css/profile.css">

And when I go to the URL http://localhost:3000/profile/someId the HTML runs correctly but I have some errors with my static folders like this:

Refused to apply style from 'http://localhost:3000/profile/css/profile.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

When I delete the :userId parameter from the server.js file, the CSS runs perfectly, like this:

app.get('/profile', (req, res) => {
    res.sendFile(path.join(__dirname, './views/profile.html'))
})

CodePudding user response：

The problem is that you're using a path relative to the current directory ./css/profile.css instead of one relative to the site's root.

TL;DR: just change <link rel="stylesheet" href="./css/profile.css"> to

<link rel="stylesheet" href="/css/profile.css">

Now here's a more complete answer:

./css/profile.css means "starting at the current directory, go to the css folder, and get the file profile.css". The current directory for http://localhost:3000/profile/someId is http://localhost:3000/profile, so the browser will try to get http://localhost:3000/profile/css/profile.css. Usually, this will just give you a "404 Not Found" error because the CSS file is not there (it is actually at http://localhost:3000/css/profile.css).

However, your code uses the parameter :userId, so when the browser asks the server for http://localhost:3000/profile/css/profile.css, the server thinks that :userId is css/profile.css and calls the GET handler for /profile/:userId. Your GET handler sends back some HTML, but the browser is expecting CSS, so the browser says that the file type (MIME type) is wrong.

At this point, the answer should be clear: all you need to do is get the correct path. /css/profile.css means "go to the root of this site (http://localhost:3000), go to the css folder, and get the file profile.css". This is what you actually want to be doing.