Express静态资源与路由冲突：JS文件请求路径被错误解析

问题根源 #

你在EJS里用./test.js是相对当前页面URL的路径，当前页面URL是/blog/abc，所以浏览器会把相对路径解析成/blog/test.js。

但你的路由/blog/:id会匹配所有/blog/xxx的请求，包括/blog/test.js。Express收到这个请求后，会尝试渲染blogPost_test.js这个EJS视图文件，而你并没有这个文件，所以终端报错Error: Cannot find module 'js'（实际是找不到对应EJS模板），同时返回错误页面的HTML，浏览器检测到MIME类型为text/html而非JavaScript，就抛出了MIME类型不匹配的错误。

另外，你的静态资源目录是public，只有请求路径为/test.js时，Express才会去public/test.js查找文件，/blog/test.js不在静态资源的匹配范围内。

解决办法 #

1. 使用绝对路径引用静态资源 #

把script标签改成绝对路径，直接指向静态资源的根路径：

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

这样浏览器会请求http://localhost:5000/test.js，Express的静态资源中间件会自动去public文件夹中查找该文件。

2. 设置HTML的base标签 #

在EJS文件的<head>里添加base标签，指定所有相对路径的基准为根路径：

<head>
  <base href="/">
  <!-- 其他head内容 -->
</head>

之后页面里的所有相对路径（比如./test.js、./css/style.css）都会自动解析成根路径下的资源，无需逐个修改。

3. 确认文件位置 #

确保test.js确实放在public文件夹下，路径为项目根目录/public/test.js，这样静态资源中间件才能正确读取到它。

内容的提问来源于stack exchange，提问作者Paweł Jakubowski