HTML中导入JS文件失败：MIME类型('text/html')不可执行问题求解

刷新首页时触发如下错误：

Refused to execute script from 'http://localhost:53134/home.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

当前使用的home.html代码：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <base href="/">
  <link rel="stylesheet" type="text/css" href="output.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="screen">
  <div class="navBar">
    <a href='/'>Home</a>
    <a href='/wallet'>Wallet</a>
    <a href='/login'>Login</a>
  </div>

  <p class="letters">Home page</p>
  <script src="home.js"></script> <!-- 问题出在这里 -->
</body>
</html>

home.js内容仅为：

console.log('hello');

注意：将这段JS代码直接写在home.html的<script>标签内时运行正常，但通过外部文件导入就报错。

解决方法 #

错误根源是服务器返回home.js时，响应的MIME类型是text/html（而非正确的application/javascript），或者服务器找不到home.js文件，返回了404错误页面（同样是HTML类型）。可以按以下步骤排查：

• 确认文件路径与位置
  检查home.js是否和home.html处于服务器的同一目录下，或者<script>标签的src路径是否正确。比如如果home.js放在子目录js下，需要写成src="js/home.js"。

• 配置服务器的MIME类型映射
  确保服务器能正确识别.js文件并返回正确的MIME类型：

  • Node.js/Express：使用express.static托管静态文件，它会自动处理MIME类型；如果手动返回文件，需设置res.setHeader('Content-Type', 'application/javascript')。
  • Apache：在项目根目录的.htaccess文件中添加AddType application/javascript .js。
  • Nginx：在站点配置文件中确保包含types { application/javascript js; }的类型映射规则。

• 检查服务器路由规则
  如果是单页应用，服务器可能配置了“所有请求都转发到首页HTML”的路由规则，导致请求home.js时返回的是HTML页面。这种情况需要调整路由，让静态资源（.js、.css、图片等）优先被服务器直接返回，不经过前端路由转发。

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