运行基于Express的Node.js API时出现'cannot GET /'错误求助

问题原因 #

你遇到的cannot GET /错误本质是：浏览器直接访问http://localhost:3001/时发送的是GET请求，但你的Express后端仅配置了POST /路由，没有处理GET请求的逻辑，因此服务器返回404错误。

你的React前端通过表单提交发送的是POST请求，本身符合后端路由配置，但直接在地址栏访问后端端口就会触发这个错误。

解决方案 #

1. 添加GET路由处理 #

在index.js中补充一个GET /路由，用于处理浏览器直接访问的场景：

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());

// 新增GET路由，处理浏览器直接访问
app.get('/', (req,res) => {
    res.json({
        message: "服务器运行正常，请通过React前端提交请求"
    });
});

app.post('/', (req,res) => {
    res.json({
        message: "submitted"
    });
});

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

2. 正确测试流程 #

不要直接访问http://localhost:3001/，而是按以下步骤操作：

• 启动React项目（默认端口为3000，即http://localhost:3000/）
• 在React页面的文本框输入内容，点击Submit按钮，此时前端会发送POST请求到后端，即可正常获取响应。

3. 可选：配置React代理（优化跨域体验） #

虽然你已经使用cors中间件解决了跨域问题，但可以在React项目的package.json中添加代理配置，简化前端请求路径：

{
  "name": "your-react-app",
  "proxy": "http://localhost:3001",
  // 其他原有配置...
}

修改后前端的fetch代码可简化为：

fetch('/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({message}),
})

验证修改 #

1. 重启Express服务器
2. 访问http://localhost:3001/会看到GET路由返回的提示信息
3. 启动React项目，提交表单后页面会显示submitted

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