Express返回带JS引用的HTML时index_func.js报404错误的解决方法

问题核心原因 #

• 未配置静态资源托管中间件，Express默认不会主动对外暴露项目内的文件，所有非显式定义路由的请求都会返回404
• 你当前定义的登录路由仅处理POST方法请求，浏览器加载外部JS文件发起的是GET请求，即使JS文件和HTML同目录，也无法匹配到对应路由

具体修复方案 #

1. 规整项目静态资源目录
   按照Express的实践规范，将前端静态脚本、样式、图片类文件统一放到独立的public目录下，把原本和login.html同放于views目录的index_func.js移动到public目录中，参考目录结构：

   项目根目录/
   ├── views/
   │   └── login.html
   ├── public/
   │   └── index_func.js
   ├── routes/
   │   └── 登录逻辑路由.js
   └── Express主入口文件.js
   

2. 在Express主入口注册静态资源托管
   注意这行代码必须放在挂载业务路由的代码之前执行，否则请求会被业务路由提前拦截：

   const express = require('express');
   const path = require('path');
   const app = express();
   
   // 注册静态资源托管：将public目录映射为网站根路径下的可访问资源
   app.use(express.static(path.join(__dirname, 'public')));
   
   // 后续再挂载你的登录路由
   const loginRouter = require('./routes/loginRouter');
   app.use('/', loginRouter);
   

3. 修正HTML内的JS引用路径
   替换原来的相对路径引用，避免路由前缀导致的路径错位：

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

常见排查点 #

• 确认index_func.js实际存放路径和静态资源托管配置的目录完全匹配，不要残留旧路径的文件
• 不要在单独的业务路由文件内嵌套静态资源托管逻辑，容易出现路径映射错位
• 如果登录路由配置了路径前缀（比如/user/login），使用./相对路径引用脚本时，浏览器会自动拼接当前页面路径，导致最终请求地址变成/user/index_func.js，使用根路径绝对引用可以彻底避免这类错位问题

内容的提问来源于stack exchange，提问作者skull Kim