ReactJS AI黑客松项目出现CANNOT GET/错误求助

我正在为一场AI黑客松开发ReactJS应用，但始终遇到**CANNOT GET/**错误。以下是相关代码及调试控制台错误截图：

App.js #

import React, { useState } from 'react';
import './App.css';

function App() {
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch("http://localhost:3001", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message }),
    })
      .then((res) => res.json())
      .then((data) => setResponse(data));
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        ></textarea>
        <button type="submit">Submit</button>
      </form>
      <div>{response.message}</div>
    </div>
  );
}

export default App;

后端index.js #

//Server end which handles API requests
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 3001;
app.use(bodyParser.json());
app.use(cors());

app.post('/', async (req, res) => {
    res.json({message: 'Hello World'});
});

app.listen(port,() => {
    console.log('listening at http://localhost:'+port);
});

调试控制台错误截图 #

问题分析与修复方案 #

1. 错误原因：后端仅配置了POST /的请求处理路由，当有GET请求访问http://localhost:3001/时，找不到对应处理逻辑，就会返回**CANNOT GET/**错误。常见触发场景：

   • 直接在浏览器地址栏输入http://localhost:3001/发起GET请求
   • 网络异常导致请求方法被意外转换（你的React代码已明确指定method: 'POST'且阻止了表单默认提交，这种情况概率极低）

2. 修复方式：

   • 若需要支持GET访问后端根路径，在后端代码中添加对应路由：

     app.get('/', (req, res) => {
       res.json({ message: '后端服务正常运行' });
     });
     

   • 打开浏览器开发者工具的网络面板，确认提交表单时的请求方法为POST、请求地址正确为http://localhost:3001/
   • 检查后端服务是否已正常启动，端口3001未被其他程序占用

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