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

Posted 2023-03-15

【中文标题】拒绝应用样式，因为它的 MIME 类型 (\'text/html\') 不是受支持的样式表 MIME 类型

【英文标题】：Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type拒绝应用样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型

【发布时间】：2020-11-10 16:53:45

【问题描述】：

我正在制作一个待办事项列表。但是我遇到了一个问题。样式表未应用于 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");
);

【参考方案1】：

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