React项目调用Node后端接口获取数据失败求助

问题核心 #

开发首个React项目时，调用Node后端从数据库获取数据失败，尝试了带参数的fetch GET/POST请求及Axios方式均无效，但后端硬编码参数时可正常运行，问题出在参数传递的前后端匹配上。

问题分析与修正 #

1. POST请求的问题 #

后端代码错误点

后端POST接口中错误使用req.params.email获取参数，但前端是通过JSON请求体传递参数，应改用req.body.email。

修正后的后端代码

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

const db = mysql.createPool({
    host:"localhost",
    user:"root",
    database:"skinport-bot"
});

app.use(express.json());

// 修正后的POST接口
app.post("/api/emailtaken", (req, res) => {
    // 从请求体中获取email参数
    const email = req.body.email;

    const sql = "SELECT * FROM user WHERE email = ?";
    db.query(sql, [email], (error, result) => {
        if (error) {
            console.log(error);
            return res.status(500).send(error);
        }
        res.send(result);
    });
});

// 添加对应的GET接口（支持GET请求场景）
app.get("/api/emailtaken", (req, res) => {
    // 从URL查询参数中获取email
    const email = req.query.email;

    const sql = "SELECT * FROM user WHERE email = ?";
    db.query(sql, [email], (error, result) => {
        if (error) {
            console.log(error);
            return res.status(500).send(error);
        }
        res.send(result);
    });
});

app.listen(3001, () => {
    console.log("running on port 3001");
});

前端POST代码优化

原async函数中then回调的返回值无法传递到外层，调整为统一的await写法：

async function checkEmailTaken(email) {
    const res = await fetch("/api/emailtaken", {
        method: 'POST',
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({ email }) 
    });
    const data = await res.json();
    console.log(data);
    return data.length > 0;
}

2. GET请求的问题 #

原后端未配置对应GET接口，导致前端GET请求无响应。上面的修正代码已添加GET接口，前端GET代码可调整为：

async function checkEmailTaken(email) {
    const url = `/api/emailtaken?${new URLSearchParams({ email })}`;
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
    return data.length > 0;
}

关键注意点 #

• POST请求：前端通过body传JSON时，后端必须用req.body接收，且需确保已配置app.use(express.json())解析JSON请求体。
• GET请求：前端通过URL查询参数传值时，后端用req.query接收对应参数。
• async函数返回值：避免混用await和then，确保异步操作的返回值能正确传递到调用方。

内容的提问来源于stack exchange，提问作者julius-gmeinder