Express NodeJS 路由错误 text/html is not text/event-stream答案

【问题标题】：Express NodeJS Routing Error text/html is not text/event-streamExpress NodeJS 路由错误 text/html is not text/event-stream
【发布时间】：2019-11-29 23:29:41
【问题描述】：

我有一个简单的 Node Express 服务器设置，它提供一个带有 bundle.js 的 html 文件。每当我尝试添加一个捕获所有路由并重定向到主页的路由时，当我打开一个未映射的路由说

时，我会在控制台中收到错误消息

“EventSource 的响应具有不是“text/event-stream”的 MIME 类型（“text/html”）。正在中止连接。”

我不确定这意味着什么，我在尝试提供 index.html 时也遇到了问题（文件路径问题），所以这可能与此有关。我正在尝试在构建文件夹中提供 Index.html。

项目结构：

Index.js（服务器文件）

const http = require('http');
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
const server = http.createServer(app);

app.use(bodyParser.json());

app.use(express.static(path.join(__dirname, '.', 'public/build')));

app.get('/', (req, res) => {
    res.sendFile('index.html', {root: path.join(__dirname, 'public/build')});
    res.end();
});

app.all('*', (req, res) => {
    console.log('triggered');
    res.redirect('/');
    res.end();
});


server.listen(3000);

奇怪的是，当我转到 localhost:3000 时，它会在节点控制台中打印“已触发”，如果我删除了捕获任何其他路由的“app.all”代码行，那么它就不会再抛出此错误了：

“EventSource 的响应具有不是“text/event-stream”的 MIME 类型（“text/html”）。正在中止连接。”

但是，如果我删除捕获路由的代码行，我会按预期收到错误“无法 GET /routename”。

索引.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>project</title>
</head>

<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>

</html>

在 Index.html 文件中呈现的内容

import React from 'react';
import './styles/index.css';

const App = () => {
    return (
        <div>
            <h1>Home Page</h1>
            <button onClick={null}>Click Me</button>
        </div>
    );
};

export default App;

Index.js（客户端）

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import App from './App';
import store from './redux/store';

require('webpack-hot-middleware/client');

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>
    , document.getElementById('root')
);

【问题讨论】：

你能描述 index.html 还是发布 HTML 内容（在反应渲染之后）？因为假设一个图像不在public/build 文件夹中，它将获得text/html 而不是图像。也许您正在文件中打开一个 EventSource
@AritraChakraborty 我添加了 Index.html 文件，这真的很奇怪，因为当我删除“app.all”行时，就实际内容而言，我没有收到有关 EventSource 的错误，没有图像，内容仅包含标题（h4）。最重要的是，每当我打开默认页面“/”路由时，“app.all”函数也会执行并且控制台日志“已触发”
是的，我知道在你渲染 bundle.js 之后我想要 html。问题不是因为app.all 而是因为res.redirect 我会在一段时间内回答，但想知道索引文件的实际内容，意味着在包被渲染后发生了什么
因为在浏览器中，每当您打开一个站点时，它都会触发一个favicon.ico 请求。转到app.all 部分。
是的！ webpack-hot-middleware/client 这就是我要问的，它需要来自后端服务器的服务器端事件。 :-)

标签： javascript node.js express

【解决方案1】：

我可以通过去掉 index.js（客户端）文件中的 webpack hot middleware import 语句来解决这个问题。

require('webpack-hot-middleware/client');

Webpack 中间件提供 EventStream 并期望 EventSource 的响应在 text/event-stream 上提供，并且由于文件是通过 text/html 提供的，因此会引发该错误。

【讨论】：