GET http://localhost:3000/public/index.js net::ERR_ABORTED 404（未找到）// MIME 类型

Question

我有一个快速后端服务器。当它启动时，它必须渲染带有

index.js

的 EJS 页面。 但是，我收到了 3 个错误：

1. 拒绝应用“http://localhost:3000/public/styles/style.css”中的样式，因为其 MIME 类型（“text/html”）不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。
2. 获取http://localhost:3000/public/index.js net::ERR_ABORTED 404（未找到）
3. 拒绝执行来自“http://localhost:3000/public/index.js”的脚本，因为其 MIME 类型（“text/html”）不可执行，并且启用了严格的 MIME 类型检查。

根目录包含：

• “node_modules”文件夹
• “公共”文件夹包含：-“图像”文件夹 - “styles”文件夹包含：

  'style.css'

  文件 -

  index.js

  文件
• 'views' 文件夹包含： - 'partials' 文件夹包含： -

  footer.ejs

  文件 -

  header.ejs

  文件 -

  create.ejs

  文件 -

  home.ejs

  文件 -

  view.ejs

  文件
• package-lock.json
• package.json

里面

footer.ejs

我有以下几行：

<script src="public/index.js"></script>

在

header.ejs

里面我有以下一行：

<link rel="stylesheet" href="public/styles/style.css">

在

index.js

里面我有以下几行：

import express from "express";
import path from "path";
import bodyParser from "body-parser";
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

const __dirname = dirname(fileURLToPath(import.meta.url)); // Define __dirname using import.meta.url

const app = express();
const port = 3000;

// Set the 'views' directory for Express to find the EJS templates
app.set('views', join(__dirname, '..', 'views'));

// Configure Express to use EJS as the template engine
app.set('view engine', 'ejs');

// Serve static files from the 'public' directory
app.use(express.static(path.join(__dirname, "public")));

// Parse URL-encoded bodies (as sent by HTML forms)
app.use(bodyParser.urlencoded({ extended: true }));

此外，我还遇到一个 Bootstrap 汉堡菜单问题，当它处于小版本时，该菜单无法工作。 这是导航栏

header.ejs

中的代码：

<nav class="navbar fixed-top navbar-expand-md bg-body-tertiary border-bottom" data-bs-theme="dark" >
        <div class="container-fluid">
       <a class="navbar-brand">Luk's Blog</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
           <div class="navbar-nav">
           <a class="nav-link" href="/">Home</a>
           <a class="nav-link" href="/create">Write Blog</a>
           </div>
        </div>
        </div>
</nav> 

需要在JS中定义它才能工作吗？

我检查了文件的路径、拼写，我什至使用chatgpt来搜索问题，但我们兜圈子却没有结果。 另外，请注意，如果我在本地运行服务器，index.js 中定义的函数正在工作（即使我收到上面显示的错误），唯一的问题是 CSS 文件（未加载）

Answer 1

您需要从资源的

public

属性中省略

src

，因为：

Express会查找相对于静态目录的文件，因此 静态目录的名称不是 URL 的一部分。

https://expressjs.com/en/starter/static-files.html

所以改变

<script src="public/index.js"></script>

到

<script src="index.js"></script>

等等

您可以定义任何安装路径，因此如果您添加

public

作为路径即可工作：

app.use('/public', express.static(path.join(__dirname, "public")));

现在它会加载：

<script src="public/index.js"></script>

至于 Bootstrap 导航栏，请确保加载 Bootstrap 资源（仅在页面上加载一次，而不是部分加载）：

BS官方示例

并确保您的自定义样式不会以某种方式发生冲突。