如何解决跨网站跳转时出现的‘Cannot POST /’错误

React默认的开发服务器（如create-react-app提供的）未配置根路径/的POST请求处理逻辑，它仅负责托管静态文件和处理前端路由，因此直接提交POST请求到http://localhost:3000/会返回Cannot POST /的404错误。以下是几种可行的解决方案：

方案1：改用GET方法传递参数（最简单） #

如果参数无需保密，直接将表单的method改为get，参数会以查询字符串形式附在URL后，React可通过路由工具解析这些参数。

修改后的HTML代码：

<form action="http://localhost:3000/" method="get">
    <input type="hidden" name="login" value="test">
    <input type="hidden" name="status" value="test2">
    <input type="submit" value="Просмотр">
</form>

React端获取参数（使用react-router-dom）：

import { useSearchParams } from 'react-router-dom';

function Home() {
  const [searchParams] = useSearchParams();
  const login = searchParams.get('login');
  const status = searchParams.get('status');

  return (
    <div>
      <p>Login: {login}</p>
      <p>Status: {status}</p>
    </div>
  );
}

export default Home;

方案2：配置后端接收POST请求（适合敏感参数） #

若必须用POST传递参数，需在React项目中添加简单后端接口处理POST请求，再重定向到前端页面。

1. 安装依赖：

npm install express cors

2. 在项目根目录创建server.js：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.urlencoded({ extended: true }));

// 处理POST请求
app.post('/', (req, res) => {
  const { login, status } = req.body;
  // 将参数通过查询字符串重定向到前端页面
  res.redirect(`/?login=${encodeURIComponent(login)}&status=${encodeURIComponent(status)}`);
});

// 托管React构建后的静态文件
app.use(express.static('build'));

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

3. 构建React项目并启动服务：

npm run build
node server.js

方案3：用JavaScript处理表单提交（无后端需求） #

通过前端JS拦截表单提交，先处理参数，再跳转到React页面并通过本地存储传递参数。

修改后的HTML代码：

<form id="redirectForm">
    <input type="hidden" name="login" value="test">
    <input type="hidden" name="status" value="test2">
    <input type="submit" value="Просмотр">
</form>

<script>
document.getElementById('redirectForm').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  // 将参数存入localStorage
  localStorage.setItem('login', formData.get('login'));
  localStorage.setItem('status', formData.get('status'));
  // 跳转到React页面
  window.location.href = 'http://localhost:3000/';
});
</script>

React端读取参数：

import { useState, useEffect } from 'react';

function Home() {
  const [login, setLogin] = useState('');
  const [status, setStatus] = useState('');

  useEffect(() => {
    // 从localStorage读取参数
    const savedLogin = localStorage.getItem('login');
    const savedStatus = localStorage.getItem('status');
    if (savedLogin) setLogin(savedLogin);
    if (savedStatus) setStatus(savedStatus);
    // 读取后清除存储，避免残留
    localStorage.removeItem('login');
    localStorage.removeItem('status');
  }, []);

  return (
    <div>
      <p>Login: {login}</p>
      <p>Status: {status}</p>
    </div>
  );
}

export default Home;

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