Node.js项目点击链接报错Cannot GET /to-do.html如何解决

问题核心原因 #

你遇到的404报错：

Cannot GET /to-do.html
本质是前端请求路径和后端配置的路由规则不匹配：

• 前端a标签设置的跳转路径是/to-do.html，但后端只定义了/toDo、/notes这类不带.html后缀的路由，没有对应/to-do.html的处理逻辑
• 你配置的express.static托管的是/public目录下的文件，如果你把html文件放在项目根目录而非public目录下，静态托管逻辑也无法匹配到这些文件

解决方案 #

方案1：修改前端跳转路径（最快生效） #

直接调整index.html中a标签的href属性，和后端路由保持一致即可：

<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="collapse navbar-collapse" id="nav-dropdown">
      <ul class="navbar-nav ms-right">
        <li class="nav-item">
          <!-- 把href从/to-do.html修改为后端定义的/toDo -->
          <a href="/toDo" class="nav-link">To-Do</a>
        </li>
        <!-- 其他页面同理修改 -->
        <li class="nav-item">
          <a href="/notes" class="nav-link">Notes</a>
        </li>
      </ul>
    </div>
</nav>

方案2：修改后端路由适配前端路径 #

如果不想改动前端代码，可以在后端新增对应路径的路由规则：

// 新增匹配/to-do.html的路由
app.get("/to-do.html", function (req, res) {
    res.sendFile(__dirname + "/to-do.html");
});
// notes页面同理新增
app.get("/notes.html", function (req, res) {
    res.sendFile(__dirname + "/notes.html");
});

方案3：优化静态资源托管（长期使用更推荐） #

把所有HTML文件（index.html、to-do.html、notes.html等）全部移动到项目的public文件夹下，之后可以删除所有自定义的HTML返回路由，express.static会自动匹配public目录下的文件路径，直接访问/to-do.html即可加载对应内容，后续新增页面也不需要修改服务端代码：

// 简化后的服务端代码
const express = require("express");
const path=require('path');

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

app.listen(3000,function(){
    console.log("Server started on port 3000");
});

内容的提问来源于stack exchange，提问作者Ankit Sharma