Express NodeJS 路由错误文本/html 不是文本/事件流

Question

I have a simple Node Express server setup that serves an html file with a bundle.js.我有一个简单的 Node Express 服务器设置，它提供一个带有 bundle.js 的 html 文件。 Whenever I try to add a route that catches all routes and redirects to the homepage, I get an error in the console when I open an unmapped route saying每当我尝试添加捕获所有路由并重定向到主页的路由时，当我打开一个未映射的路由时，我会在控制台中收到一条错误消息

"EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection." “EventSource 的响应的 MIME 类型（“text/html”）不是“text/event-stream”。中止连接。”

I'm not exactly sure what this means, I was also having issues with trying to serve the index.html (Issues with the path for the file) so it's possible that might have something to do with this.我不确定这意味着什么，我在尝试提供 index.html 时也遇到了问题（文件路径的问题），所以这可能与此有关。 I'm trying to serve the Index.html inside the build folder.我正在尝试在构建文件夹中提供 Index.html。

Project Structure:项目结构：

Index.js (Server File) 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);

Oddly enough, when I go to localhost:3000 It prints "triggered" in the node console and If I remove the "app.all" line of code that catches any other routes, then it doesn't throw this error anymore:奇怪的是，当我转到 localhost:3000 时，它会在节点控制台中打印“triggered”，如果我删除捕获任何其他路由的“app.all”代码行，则它不再抛出此错误：

"EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection." “EventSource 的响应的 MIME 类型（“text/html”）不是“text/event-stream”。中止连接。”

However, If I remove the line of code that catches routes, I get the error "cannot GET /routename" as expected.但是，如果删除捕获路由的代码行，则会按预期收到错误“无法获取 /routename”。

Index.html索引.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>

Content being rendered in the Index.html file在 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 (Client side) 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')
);

Answer 1

I was able to solve this problem by getting rid the webpack hot middleware import statement in the index.js (client) file.我能够通过摆脱 index.js（客户端）文件中的 webpack 热中间件导入语句来解决这个问题。

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

The Webpack middleware serves an EventStream and expects the EventSource's response to be served on text/event-stream and since the file is served over text/html, it throws that error. Webpack 中间件提供 EventStream 并期望 EventSource 的响应在 text/event-stream 上提供，并且由于文件通过 text/html 提供，因此会引发该错误。

Express NodeJS 路由错误文本/html 不是文本/事件流

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-11-29 15:29:41

Express NodeJS 路由错误文本/html 不是文本/事件流

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-11-29 15:29:41

解决方案1
1 已采纳 2019-11-29 15:29:41