如何跨目录关联JS文件至EJS？解决MIME类型校验错误

问题根源 #

出现Refused to execute script... MIME type ('text/html') is not executable错误，本质是你没有在Express应用中正确配置静态资源目录。当请求/public/client.js时，Express找不到对应的静态文件，返回的是404错误页面（MIME类型为text/html），而非预期的JS文件。

正确解决步骤 #

1. 在app.js中配置静态资源中间件 #

Express需要通过express.static中间件指定静态资源目录，让它能正确识别并返回public目录下的文件：

• 如果public目录和app.js处于同级目录，直接添加以下代码：

  app.use(express.static('public'));
  

• 为避免路径歧义（比如不同环境下相对路径失效），推荐使用path模块解析绝对路径：

  const path = require('path');
  // 把public目录设为静态资源根目录
  app.use(express.static(path.join(__dirname, 'public')));
  

2. 在EJS文件中正确引用client.js #

配置完静态资源后，public目录下的文件会被映射到网站根路径，直接用根路径引用即可，无需相对路径：

<script type="text/javascript" src="/client.js"></script>

为什么临时方案能生效？ #

你把client.js复制到admin目录后，EJS引用的相对路径client.js会指向/admin/client.js。此时如果你的Express路由没有拦截该请求，且admin目录被间接识别为可访问路径，就能正确返回JS文件，但这是不规范的临时手段，长期维护会导致文件冗余。

内容的提问来源于stack exchange，提问作者Isaac Del Castillo