我的 ejs 页面没有像其他 ejs 页面那样加载答案

【问题标题】：my ejs page is not loading like other ejs page我的 ejs 页面没有像其他 ejs 页面那样加载
【发布时间】：2020-01-21 17:09:32
【问题描述】：

enter image description here 这是我的 edit_admin 代码

仅在此页面中，我的 html css 没有加载 gretting 404 错误我已经尝试了很多，但我不知道这背后的真正原因是什么一种错误拒绝应用来自 '' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且严格的 MIME 在 nodejs 中启用了检查拒绝应用来自 'http://localhost:5000/admin/css/bootstrap3.3.7.min.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Admin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap3.3.7.min.css">
    <link rel="stylesheet" type="text/css" href="../fonts/font-awesome-4.7.0/css/font- 
       awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../css/dashboard.css">
  </head>
  <body>
    <!-- SIDE BAR START -->
      <%- include('../partials/admin_sidebar.ejs'); %>
    <!-- SIDE BAR END -->
    <section id="contents">
      <nav class="navbar navbar-default">
        <!-- NAV BAR START -->
              <%- include('../partials/admin_navbar.ejs'); %>
        <!-- NAV BAR END -->
      </nav>
     <div class="container-fluid">
        <div class="row" style="background-color: white;">
         <div class="col-md-8">

        <form action="/admin/edit_admin/<%- admin.id %>" method="post">
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" value="<%- admin.email %>" name="email" class="form-control" id="email" placeholder="name@example.com">
          </div>
          <!-- <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="exampleFormControlSelect1">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div> -->
          <div class="form-group">
             <label for="password">Password</label>
            <input type="password" value="<%- admin.password %>" name="password" class="form-control" id="password" placeholder="password">
          </div>
          <div class="form-group">
            <input type="submit" class="btn btn-success" name="submit">
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
<script src='http://code.jquery.com/jquery-latest.js' type="text/javascript"></script>
<script src='../js/main.js' type="text/javascript"></script>
<script src='../js/dashboard.js' type="text/javascript"></script>

【问题讨论】：

标签： node.js ajax ejs

【解决方案1】：

我认为您需要在 nodejs 应用文件中指定资产文件夹。

app.use(“ASSETS_FOLDER”, express.static(“ASSETS_FOLDER”);

【讨论】：

我做到了 app.use(express.static(path.join(__dirname,'public')));
那么你有没有像css、js这样的所有文件都在“public”文件夹中？
试试这个 app.use(“public”, express.static(“public”); 而不是 app.use(express.static(path.join(__dirname,'public')));
添加 app.use(“ public”, express.static(“ public”); 后删除你的 ejs 页面上的“../” 像这样：
如果你的 admin_app.js 在 app 根目录下的另一个文件夹中，那么试试这个 app.use(“../public”, express.static(“ ../public”);

【解决方案2】：

http://localhost:5000/admin/css/bootstrap3.3.7.min.css 的 css 文件路径不正确。

因为在指定路径上找不到文件，所以转到404并返回404的html页面，导致你看到这个错误

我建议使用绝对路径来引用您的静态 css/js 资源文件，因为它可能需要从不同位置访问，如果从不同位置访问，相对路径可能不起作用

要确定这是您遇到的错误，只需将此网址 http://localhost:5000/admin/css/bootstrap3.3.7.min.css 粘贴到您的浏览器中，然后查看是否在此处获取 css 文件，如果您看到 404 页面，则该错误正是我上面解释的。

UPDATE > 在 ejs 中引用资产的理想方式

在渲染 ejs 时，您可以像这样在路由中传递 base_url

res.render('edit', {
    base_url: "http://" + req.headers.host
})

然后像这样指定链接 url 表明它总是捕获确切的文件，无论你从哪里调用它

<link rel="stylesheet" type="text/css" href="<%= base_url%>/css/bootstrap3.3.7.min.css">
<link rel="stylesheet" type="text/css" href="<%= base_url%>/fonts/font-awesome-4.7.0/css/font- 
    awesome.min.css">
<link rel="stylesheet" type="text/css" href="<%= base_url%>/css/dashboard.css">

【讨论】：

我的其他页面工作正常，并且与此文件位于同一位置！
所有页面路由都在同一个级别吗？就像它可能在带有 {url}/user 的页面上工作，但可能不适用于 {url}/admin/user 因为第二条路线提前一级，因此对静态文件的相对引用可能不适用于这条路线
请分享你指定路由的代码、你的主js文件和你的文件夹结构的快照，这会很有帮助
我添加了目录结构的截图请看
我现在确定这条路线比其他路线领先一级，尝试在上面的代码中的引导文件 src 之前再添加 ../ 一次，它会正确显示