Node.js服务器加载HTML时MIME类型错误问题求助

这个错误的核心原因是你的Express服务器没有正确处理/src/verbatims.js的请求，导致浏览器请求这个JS文件时，服务器返回的是HTML内容（或404页面），MIME类型被识别为text/html，而非正确的text/javascript。下面是具体的解决思路和修正方案：

1. 用Express静态文件服务替代手动路由 #

你现在手动写了../src/verbatims.js的路由，但Express的路由是基于服务器根路径的，../这种相对路径在路由规则里不生效，而且手动维护每个静态文件的路由非常低效。正确的做法是使用Express内置的express.static中间件托管静态资源。

修正后的服务器代码 #

const express = require('express')
const RouterVerbatim = require('./routerVerbatim')
const fs = require('fs')
const path = require('path') // 引入path模块处理绝对路径

class Server {
  constructor() {
    this.app = express()

    // 配置静态文件服务：托管src文件夹下的所有资源
    // path.resolve确保路径是绝对路径，避免相对路径出错
    this.app.use('/src', express.static(path.resolve(__dirname, '../src')))

    this.app.get('/', function (req, res) {
      res.send('Hello World')
    })

    this.app.get('/index', function (req, res) {
      res.writeHead(200, {'Content-Type': 'text/html'});
      // 用path.resolve处理HTML文件的绝对路径
      fs.readFile(path.resolve(__dirname, './View/index.html'), function (err,data) {
        if (err) {
          res.status(404).send('HTML file not found');
          return;
        }
        res.end(data);
      })
    })

    this.app.use('/verbatims', new RouterVerbatim().router)
  }

  start() {
    this.app.listen(8080, function() {
      console.log('Exemple app listening on port 8080!')
    })
  }
}

module.exports = Server;

2. 确认项目文件结构 #

确保你的文件目录结构和路径配置匹配，推荐结构如下：

你的项目根目录
├── src/
│   └── verbatims.js
├── View/
│   └── index.html
├── Server.js (你的服务器文件)
├── routerVerbatim.js
└── package.json

3. 检查HTML中的脚本引用 #

你的HTML里的脚本引用是正确的，保持不变即可：

<script src="/src/verbatims.js" type="application/javascript"></script>

4. 额外的代码小问题（顺便修正） #

除了MIME类型错误，你的Vue代码还有几个小问题会导致功能异常：

• ite是Vue实例data里的属性，调用时需要用this.ite而非直接ite
• setInterval的timer没有保存，导致clearInterval无法停止定时器
• clearInterval需要传入定时器ID才能生效

修正后的Vue脚本：

<script>
let app = new Vue({
  el:'#data',
  data: {
    request: "toto",
    ite: 0,
    timer: null // 保存定时器ID
  },
  methods: {
    change: function() {
      this.changeNbRequest() // 调用实例内的方法
    },
    stop: function() {
      if (this.timer) {
        clearInterval(this.timer) // 传入定时器ID
        this.timer = null
      }
    },
    changeNbRequest: function() {
      // 先清除已有定时器，避免重复创建
      if (this.timer) clearInterval(this.timer)
      this.timer = setInterval(() => { // 用箭头函数保留this指向
        let verbatim = new Verbatims().list()[this.ite];
        // 可以在这里更新request的值，比如：
        // this.request = verbatim;
        this.ite++; // 别忘了递增索引
      }, 5000);
    }
  }
});
</script>

为什么这样能解决问题？ #

express.static会自动处理静态资源的请求，正确设置MIME类型（比如JS文件返回text/javascript），同时自动处理路径匹配，不需要你手动为每个静态文件写路由。用path.resolve生成绝对路径可以避免因为服务器启动目录不同导致的路径错误。

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