升级Nuxt 2到Nuxt Bridge后EventSource MIME类型错误修复求助

问题背景 #

升级Nuxt 2至Nuxt Bridge（版本"@nuxt/bridge": "npm:@nuxt/bridge-edge@^3.0.0-27928371.c30fa0f"）后，控制台持续抛出以下错误：

'EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.'

排查发现Nuxt Bridge中SSE响应的默认Content-Type疑似从text/event-stream变更为text/plain，尝试通过VueSocketIO配置请求头未解决问题，错误暂未影响功能但需修复。

可行修复方案 #

方案1：通过ServerMiddleware强制设置SSE路由响应头 #

在nuxt.config.js中添加自定义中间件，匹配SSE相关路由并强制设置正确的Content-Type：

// nuxt.config.js
export default {
  bridge: {
    nitro: true
  },
  serverMiddleware: [
    (req, res, next) => {
      // 替换为你的实际SSE路由前缀，比如'/api/sse'
      if (req.url.startsWith('/sse')) {
        res.setHeader('Content-Type', 'text/event-stream')
        res.setHeader('Cache-Control', 'no-cache')
        res.setHeader('Connection', 'keep-alive')
      }
      next()
    }
  ]
}

方案2：调整Socket.io传输方式 #

若错误由Socket.io的polling模式触发，可优先切换至websocket传输，避免EventSource相关检查：

// 自定义VueSocketIO实例配置调整
Vue.use(new VueSocketIO({
  debug: true,
  connection: 'http://localhost:3000',
  transports: ['websocket'], // 优先使用websocket替代polling
}));

如果必须使用polling模式，需在服务端配置Socket.io的响应头，而非客户端请求头。

方案3：Nitro路由级配置修正 #

针对Nuxt Bridge依赖的Nitro服务，直接在路由层面指定SSE响应头：

// nuxt.config.js
export default {
  nitro: {
    handlers: [
      {
        route: '/sse/**', // 匹配所有SSE相关路由
        handler: '~/server/sse.handler.js', // 你的SSE处理文件
        headers: {
          'Content-Type': 'text/event-stream',
          'Cache-Control': 'no-cache',
          'Connection': 'keep-alive'
        }
      }
    ]
  }
}

验证 #

修改配置后重启Nuxt开发服务，检查控制台是否仍出现该MIME类型错误。

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