React应用Fetch POST失效：返回Cannot GET /且仅发送GET请求

一、浏览器返回「Cannot GET /」的解决 #

这个问题本质是服务器未配置根路径的响应规则，或者React应用的静态资源未正确托管：

1. 托管React静态文件：如果用Express搭建服务器，需先执行npm run build生成React的build目录，然后在index.js中添加静态文件服务和SPA路由 fallback：

const path = require('path');
// 托管build目录下的静态资源
app.use(express.static(path.join(__dirname, 'client/build')));
// 所有非API路由都返回React的index.html，适配SPA路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build/index.html'));
});

2. 检查服务器路由：确保服务器没有误删根路径的GET路由，或者路由规则冲突导致无法匹配。

二、Fetch指定POST却发送GET的问题 #

以下是最常见的原因和修复方式：

• 未阻止表单默认提交行为：如果fetch是在表单submit事件中触发，浏览器默认会发起GET请求（表单默认method为GET），必须手动阻止：

const handleSubmit = (e) => {
  e.preventDefault(); // 关键：阻止表单默认提交
  fetch('/your-api-path', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(yourData),
  })
  .then(res => res.json())
  .catch(err => console.error(err));
};

• Fetch参数拼写错误：检查method字段是否为大写的'POST'，避免写成小写或拼写错误（比如'post'或'Method'）。
• 服务器重定向导致方法变更：如果服务器对请求返回3xx重定向，浏览器会自动将POST转为GET。检查服务器端路由是否存在不必要的重定向逻辑。
• 缓存或插件干扰：打开开发者工具勾选「Disable cache」，或用隐身模式测试，排除浏览器缓存、插件对请求方法的影响。

额外验证步骤 #

1. 测试服务器POST路由：用curl直接发请求，确认服务器能接收POST：

curl -X POST -H "Content-Type: application/json" -d '{"key":"value"}' http://localhost:你的端口/api/路径

2. 检查Network面板：在开发者工具Network标签下，查看请求的Request Method、请求头、请求体是否符合预期，确认是否真的是GET请求。

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