拒绝应用样式，因为其 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型

Question

我正在制作一个待办事项列表。但是我遇到了一个问题。样式表未应用于 localhost:3000/lists/customList 。它给出了错误： 拒绝应用来自 'http://localhost:3000/lists/css/styles.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。 我哪里错了？

const bodyParser = require("body-parser");
const date = require(__dirname + "/date.js");
const mongoose = require("mongoose");





const app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

mongoose.connect("mongodb://localhost:27017/todo-list",{ useNewUrlParser: true, useUnifiedTopology: true });
const itemsSchema=new mongoose.Schema({
  name:String
});

const Item=mongoose.model("Item",itemsSchema);

const getMilk=new Item({name:"Get Milk"}) ;
const getHairCut= new Item({name:"Get a Haircut"});
const goForWalking=new Item({name:"Go for walking"});

const defaultItems = [getMilk,getHairCut,goForWalking];

const listSchema=new mongoose.Schema({
  name:String,
  items:[itemsSchema]
});

const List=mongoose.model("List",listSchema);



app.get("/", function(req, res) {
                Item.find({},function(err,foundItems){
                if(err)console.log(err);
                const day = date.getDate();

                if(foundItems.length===0)
                {
                            Item.insertMany(defaultItems,function(err){
                              if(err)console.log(err);
                              else console.log("Success");
                            });
                }
                res.render("list", {listTitle: day, newListItems: foundItems});
                });
});

app.get("/lists/:customListName",function(req,res)
{
  const customListName=req.params.customListName;

  List.findOne({name:customListName},function(err,foundList)
  {
    if(err)console.log(err);
    else{
      if(foundList)  {res.render("list", {listTitle: foundList.name, newListItems: foundList.items});}
      else {
          const list=new List({
          name:customListName,
          items:defaultItems});
          list.save();
          res.redirect("/lists/"+customListName);
        }
      }
  });

});

app.post("/delete",function(req,res){
const itemId=req.body.checkBoxName;
console.log(itemId);
Item.findByIdAndRemove(itemId,function(err){
  if(err)console.log(err);
  else console.log("Successfully deleted");
})
res.redirect("/");
});

app.post("/", function(req, res){
    let item = new Item({name:req.body.newItem});
    item.save();
    res.redirect("/");
});


app.get("/about", function(req, res){
  res.render("about");
});

app.listen(3000, function() {
  console.log("Server started on port 3000");
});

Answer 1

我改了: app.get("/lists/:customListName",function(req,res){...}); 进入： app.get("/:customListName",function(req,res){...}); 现在正在应用样式表。但是我不知道如何或为什么。

拒绝应用样式，因为其 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型

Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type

javascript

node.js

express

mongoose

route-parameters