ReactJS向KoaJS服务器传数据遇405 Method Not Allowed错误求助

问题根源 #

你的Koa后端仅配置了GET方法的根路由，但前端React代码使用Axios.post()发送的是POST请求，服务器找不到对应方法的路由，因此返回405错误。另外，你引入了koa-bodyparser但未启用，这会导致无法解析POST请求中的表单数据。

修复步骤 #

1. 完善Koa后端配置 #

修改server.js，启用bodyParser并添加POST路由：

const Koa = require('koa');
const json = require('koa-json');
const KoaRouter = require('koa-router');
const bodyParser = require('koa-bodyparser');
const cors = require('@koa/cors');

const port = 3100
const server = new Koa();
const router = new KoaRouter();

// 先启用bodyParser，确保能解析POST请求体
server.use(bodyParser());
server.use(json());
server.use(cors());

// 保留GET路由（如果需要）
router.get('/', ctx => {
  ctx.body = { message: 'GET请求成功' };
});

// 添加POST路由处理前端提交的数据
router.post('/', ctx => {
  // 从请求体中获取前端发送的数据
  const { email, firstname, lastname } = ctx.request.body;
  console.log('收到表单数据：', { email, firstname, lastname });
  // 返回响应给前端
  ctx.body = {
    success: true,
    data: { email, firstname, lastname },
    message: '数据接收成功'
  };
});

server.use(router.routes());
server.use(router.allowedMethods());

server.listen(port, () => console.log(`Server Running on port ${port}`));

2. 优化前端React代码（可选但推荐） #

给Axios请求添加错误捕获，方便调试：

const FormContainer = () => {
    const url = "http://localhost:3100/" 
    const [data,setData] = useState({
        email:"",
        firstname:"",
        lastname:""
    })
    
    function submit(e){
        e.preventDefault();
        Axios.post(url, {
            email: data.email,
            firstname: data.firstname,
            lastname: data.lastname
        })
        .then(res => {
            console.log(res.data)
        })
        // 添加错误捕获
        .catch(err => {
            console.error('请求错误：', err.response?.data || err.message);
        })
    }
    
    function handle(e){
        const newData = {...data}
        newData[e.target.id] = e.target.value
        setData(newData)
        console.log(newData);
    }

    // 补充表单渲染代码（你原代码缺失部分）
    return (
        <form onSubmit={submit}>
            <input type="email" id="email" value={data.email} onChange={handle} placeholder="邮箱" />
            <input type="text" id="firstname" value={data.firstname} onChange={handle} placeholder="名" />
            <input type="text" id="lastname" value={data.lastname} onChange={handle} placeholder="姓" />
            <button type="submit">提交</button>
        </form>
    )
}

验证修复 #

1. 重启Koa服务器
2. 在React前端填写表单并提交，此时控制台应该能打印出后端返回的成功响应，不再出现405错误

内容的提问来源于stack exchange，提问作者Lý Trầm