Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
490 views
in Technique[技术] by (71.8m points)

javascript - Express NodeJS路由错误text / html不是文本/事件流(Express NodeJS Routing Error text/html is not text/event-stream)

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的响应具有不是“ text / event-stream”的MIME类型(“ text / html”)。中止了连接。”)

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.

(我正在尝试在build文件夹中提供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时,它在节点控制台中显示“已触发”,并且如果我删除捕获任何其他路由的“ app.all”代码行,那么它将不再抛出此错误:)

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

(“ EventSource的响应具有不是“ text / event-stream”的MIME类型(“ text / html”)。中止了连接。”)

However, If I remove the line of code that catches routes, I get the error "cannot GET /routename" as expected.

(但是,如果我删除捕获路由的代码行,则会收到错误“无法获取/ routename”,这是预期的。)

Index.html

(Index.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')
);


  ask by Waqas Abbasi translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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提供的,因此会抛出该错误。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...