无法将main.css链接到header.ejs？Express静态资源配置异常排查

核心问题：静态资源引用路径错误 #

你已经通过 app.use(express.static("public")) 将 public 目录设为静态资源根目录，此时访问该目录下的文件时，路径应从 public 的子目录开始，而非携带项目本地的绝对路径。当前 header.ejs 中使用的 /Backend/Capstone Project - Public API/public/styles/main.css 是错误路径，Express 会将 express.static("public") 映射为网站根路径下的资源入口，正确路径需简化为静态资源内部的相对结构。

分步修复方案 #

1. 修正 header.ejs 中的资源引用 #

将 CSS 和图标路径改为基于静态资源根目录的短路径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/styles/main.css" rel="stylesheet">
    <link rel="icon" href="/images/cup-straw.svg" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <title>The Cocktails Generator</title>
</head>
<body>

2. 确保静态资源路径绝对可靠（可选但推荐） #

当前代码注释了 __dirname 相关配置，在 ES 模块环境下，express.static("public") 的路径依赖启动服务器时的工作目录，可能出现路径偏移问题。建议恢复 __dirname 配置，确保静态资源路径始终正确：

import express from "express";
import bodyParser from "body-parser";
import axios from "axios";
import path from "path";
import { dirname } from "path";
import { fileURLToPath } from "url";

const __dirname = dirname(fileURLToPath(import.meta.url));
const app = express();
const port = 3000;
const API_URL = "https://www.thecocktaildb.com/api/json/v1/1/random.php";

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
// 使用 __dirname 拼接绝对路径，避免工作目录变化导致的错误
app.use(express.static(path.join(__dirname, "public")));

// 其余代码保持不变

3. 修复错误处理逻辑 #

在 POST 请求的捕获块中，console.log(error.result) 是错误写法，应改为打印完整错误信息，并返回明确的错误提示：

app.post("/", async (req, res) => {
    try {
        const response = await axios.get(API_URL);
        const result = response.data;
        console.log(result);
        res.render("index.ejs", {drink: result});
     } catch (error) {
        console.log(error); // 修正错误打印逻辑
        res.status(500).send("获取饮品失败，请稍后重试");
     } 
});

验证修复效果 #

启动服务器后访问 http://localhost:3000，若页面背景变为蓝色、<h1> 文字为青色，说明 CSS 已成功加载生效。

内容的提问来源于stack exchange，提问作者Yuval Yanay