React+Express项目无输出无报错排查：WebSocket及404问题求助

问题描述 #

我开发的React前端+Express后端项目没有任何输出结果，浏览器和命令行都没有明确报错，定位问题困难。项目启动初期会出现WebSocketClient.js:16报错：WebSocket连接'ws://localhost:3000/ws'失败，刷新页面后这个错误消失，但浏览器会出现“Failed to load resource: the server responded with a status of 404 (Not Found)”的错误。

后端代码 #

import express from "express";
import bodyParser from "body-parser";
import mongoose from "mongoose";
import cors from "cors";
import postRoutes from "./routes/posts.js";

const app = express();

app.use(bodyParser.json({ limit: "30mb", extended: true }));
app.use(bodyParser.urlencoded({ limit: "30mb", extended: true }));
app.use(cors());
app.use("/posts",postRoutes);


// mongodb连接
const CONNECTION_URL = "mongodb+srv://memory:memory1213@abscluster.f5vt7.mongodb.net/?retryWrites=true&w=majority";
const PORT = process.env.PORT || 5000;

mongoose.connect(CONNECTION_URL, { useNewUrlParser:true, useUnifiedTopology: true })
.then(() => app.listen(PORT, () => {
    console.log("服务器运行在端口:",PORT)
}))
.catch((error) => console.log(error.message))

/* mongoose.set("useFindAndModify", false); */

前端App.js代码 #

import React,{useEffect} from "react";
import { Container, AppBar, Typography, Grow, Grid} from "@material-ui/core";
import { useDispatch } from "react-redux";
import {getPosts} from "./actions/posts";
import memories from "./images/memories-Logo.png"
import Posts from "./components/Posts/Posts";
import Form from "./components/Form/Form";
import useStyles from "./styles";

function App() {
  const classes = useStyles();
  const dispatch = useDispatch();

  useEffect(()=> {
    dispatch(getPosts());
  },[getPosts])
  return (
    <Container maxWidth="lg">
      <AppBar className={classes.appBar} position="static" color="inherit">
        <Typography className={classes.heading} variant="h2" align="center">Memories</Typography>
        <img className={classes.image} src={memories} alt="memories" height="60"/>
      </AppBar>
      <Grow in>
        <Container>
          <Grid container justifyContent="space-between" alignItems="stretch" spacing={3}>
            <Grid item xs={12} sm={7}>
                <Posts />
            </Grid>
            <Grid item xs={12} sm={4}>
                <Form />
            </Grid>
          </Grid>
        </Container>
      </Grow>
    </Container>
  );
}

export default App;

前端index.js代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from "react-redux";
import { legacy_createStore, applyMiddleware, compose } from "redux";
import thunk from 'redux-thunk';
import reducers from "./reducers"

const store = legacy_createStore(reducers, compose(applyMiddleware(thunk)))

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

reportWebVitals();

问题分析与解决 #

1. WebSocket错误处理 #

初期的WebSocket连接错误是React开发服务器默认尝试建立WebSocket实现热重载，但后端未配置WebSocket服务导致的。这个错误刷新后消失是因为热重载完成，不影响核心功能，可忽略；也可以在前端项目的package.json中添加代理配置避免相关问题：

"proxy": "http://localhost:5000"

2. 404错误排查与解决 #

浏览器404错误核心原因是请求路径不匹配或未转发到后端，按以下步骤处理：

• 配置前端代理：在前端package.json中添加上述代理配置，重启React服务后，前端发起的/posts请求会自动转发到后端5000端口。
• 检查API请求路径：确认getPosts action中的请求URL是否为相对路径（如fetch('/posts')），如果写死为http://localhost:3000/posts会直接请求React服务器，导致404。
• 验证后端路由：检查postRoutes文件是否正确定义了GET请求的根路径，示例正确路由：

  import express from 'express';
  const router = express.Router();
  
  router.get('/', (req, res) => {
    res.json({ message: 'Posts fetched successfully' });
  });
  
  export default router;
  

• 确认后端状态：检查命令行是否输出服务器运行在端口: 5000，以及MongoDB连接是否成功（连接失败会导致后端无法正常响应）。

3. 无输出问题排查 #

项目无输出多因数据未正确获取或状态未更新：

• 打开浏览器开发者工具Network面板，查看/posts请求的状态和响应，确认是否返回有效数据。
• 安装Redux DevTools扩展，检查getPosts action是否触发、reducer是否正确更新状态。
• 验证Posts组件是否正确读取Redux状态，示例：

  import { useSelector } from 'react-redux';
  
  const Posts = () => {
    const posts = useSelector((state) => state.posts);
    // 渲染逻辑
  };
  

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