时间戳

首页 > 解决方案 > 当我将两个参数传递给 app.get 时，为什么我的 CSS 不起作用？

css - 当我将两个参数传递给 app.get 时，为什么我的 CSS 不起作用？

问题描述

我正在创建一个快速应用程序，每当我向 URL 添加“：ID”参数时，我的 CSS 代码就会停止工作。我知道这是一个文件路径问题，因为引导程序仍然可以正常使用，但是在带有 ID 参数的页面上显示：“拒绝应用来自' https://XXXXXX.c9users.io/unapproved/main.css '的样式，因为它MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。”

main.css 在我的 /public 文件夹中，但它看起来像是在标题为“未批准”的文件夹中查找。

我试过改变路由顺序，我试过改变我的 app.use(express.static(__dirname)) 代码。

这是我的 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});
        }
    });

这是我的html：

<% include partials/header %>
<h1><image src="<%= invoice.imageUrl %>"</h1>
<% include partials/footer %>

这是我的标题：

<!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>

标签： csstwitter-bootstrapexpress

解决方案

我认为更改为 css 路径绝对路径将解决您的问题

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

推荐阅读