While developing an express app, I encountered an issue where my CSS code stopped working whenever I added an ":ID" parameter to the URL. It seems like a filepath problem because bootstrap is still loading fine, but on the specific page with the ID parameter, it gives this error message: "Refused to apply style from '' because its MIME type ('text/html') is not supported and strict MIME checking is enabled."
The main.css file is located in my /public folder, but for some reason, it's trying to access it from a folder titled "unapproved".
I've attempted changing the routing order and tweaking the app.use(express.static(__dirname)) code without success.
Here is my app.get:
app.get("/unapproved/:id/", function(req, res){
var invoiceID = mongoose.mongo.ObjectId(req.params.id);
InvoiceObj.findById(invoiceID,function(err,foundInvoice){
if(err){
console.log(err);
}else{
res.render("invoiceScreen",{invoice:foundInvoice});
}
});
And here is the HTML snippet:
<% include partials/header %>
<h1><image src="<%= invoice.imageUrl %>"</h1>
<% include partials/footer %>
Lastly, here is my header content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice system</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src='https://code.jquery.com/jquery-2.1.4.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>