React-Ionic应用未刷新时Fetch创建用户请求失效问题

我开发了一个React-Ionic Web应用，对接自定义NodeJS服务器。目前读取用户数据的GET请求正常，但创建用户的POST请求只有在刷新页面后才能正常工作——刷新后所有GET、POST请求都没问题，不刷新时：

• 前端createUser函数里，除了USR SUCCESSFULLY LAUNCH...这条日志，其余日志都正常输出
• NodeJS服务器端连第一个日志STARTING TO CREATE USER都没输出，说明请求根本没到服务器
• 哪怕把Fetch的URL改成错误地址，也不会触发任何错误，看起来Fetch请求根本没执行

前端创建用户函数代码 #

export async function createUser(p_user: StudentSkeletonDB) {
    //Normalize name guid familyname and comments
    //Removing all specials characters

    console.log("USR STARTING TO CREATE :")

    let newUser: StudentSkeletonDB = p_user;
    newUser.firstname = newUser.firstname.replace(/[~`!@#$%^&*()+={}\[\];:'"<>,\/\\]/g, '');
    newUser.guid_id = newUser.guid_id.replace(/[~`!@#$%^&*()+={}\[\];:'"<>,\/\\]/g, '');
    newUser.familyname = newUser?.familyname != undefined ? newUser.familyname.replace(/[~`!@#$%^&*()+={}\[\];:'"<>,\/\\]/g, '') : "";
    newUser.comments = newUser?.comments != undefined ? newUser.comments.replace(/[~`!@#$%^&*()+={}\[\];:'"<>,\/\\]/g, '') : "";

    console.log("USR NORMALIZED :")
    console.log(newUser)

    var myHeaders = new Headers();
    myHeaders.append('Content-Type', 'application/json');
    myHeaders.append('Content-Lenght', '' + JSON.stringify(newUser).length);

    var data = new FormData();
    data.append("json", JSON.stringify(newUser));

    console.log("USR SENDING... :")
   
    return await fetch("http://127.0.0.1:8083/signup", {
        headers: myHeaders,
        method: 'POST',
        body: JSON.stringify(newUser)
    }).then((s) => {
        console.log("USR SUCCESSFULLY LAUNCH... :")
        return s;
    });
}

NodeJS服务器端处理代码 #

exports.postSignup = async(req, res, next) => {
    //getting user data from request body
    console.log("STARTING TO CREATE USER")
    const { guid_id, firstname, familyname, _password, birthday, usertype, class_id, login, filenumber, avatar, language, isactive, ef_sessionpid, comments, connected, created, simu_password, gender, driving_school_code, nb_connection } = req.body;
    try {

        const user = new User({
            guid_id,
            firstname,
            familyname,
            _password,
            birthday,
            usertype,
            class_id,
            login,
            filenumber,
            avatar,
            language,
            isactive,
            ef_sessionpid,
            comments,
            connected,
            created,
            simu_password,
            gender,
            driving_school_code,
            nb_connection
        });
        const result = await user.createUser();
        result.send(user);
    } catch (error) {
        const errorToThrow = new Error();
        switch (error.code) {
            case '23505':
                errorToThrow.message = 'User already exists';
                errorToThrow.statusCode = 403;
                break;
            default:
                errorToThrow.statusCode = 500;
        }
        //pass error to next()
        next(errorToThrow);
    }
};

问题排查与解决方案 #

1. 异步请求未被正确处理 #

不刷新时Fetch的then不执行、错误URL无反应，核心原因大概率是调用createUser的地方未正确处理异步逻辑：

• 调用时没加await，也没通过.then()处理Promise，导致请求被静默忽略
• 调用函数本身是同步函数，异步操作被阻塞

解决方法：
确保调用createUser时正确处理异步流程：

async function handleCreateUser(userData) {
  try {
    const response = await createUser(userData);
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    // 后续业务逻辑
  } catch (err) {
    console.error('创建用户失败:', err);
  }
}

2. 前端请求参数/头存在冗余错误 #

代码里创建了FormData但未使用，且Content-Lenght拼写错误（正确应为Content-Length），虽刷新后能工作，但不刷新时可能触发浏览器拦截：

• 错误的请求头会导致浏览器取消请求
• 未捕获Fetch的网络错误或HTTP错误码

解决方法：

• 删除无用的FormData代码
• 修正请求头拼写，或直接去掉Content-Length（浏览器会自动计算）
• 给Fetch添加错误捕获：

return await fetch("http://127.0.0.1:8083/signup", {
    headers: {
        'Content-Type': 'application/json'
    },
    method: 'POST',
    body: JSON.stringify(newUser)
}).then((s) => {
    console.log("USR SUCCESSFULLY LAUNCH... :")
    return s;
}).catch(err => {
    console.error('Fetch请求错误:', err);
    throw err; // 抛出错误让调用方处理
});

3. 组件/路由生命周期异常 #

不刷新时，组件可能处于未完全挂载、路由切换中的状态，导致请求被拦截：

• 组件未完成挂载就调用createUser
• 路由切换导致请求被取消

解决方法：

• 确保createUser在用户主动触发（如按钮点击）或组件挂载完成后（useEffect）调用
• 若和路由相关，可在路由切换时重置请求状态

4. 跨域配置问题 #

虽刷新后正常，但不刷新时可能存在跨域预请求（OPTIONS）失败、缓存异常：

• 服务器未正确处理OPTIONS请求
• 浏览器缓存了错误的跨域配置

解决方法：
在NodeJS服务器添加跨域中间件（如cors）：

const cors = require('cors');
app.use(cors({
    origin: 'http://localhost:3000', // 替换为你的前端地址
    credentials: true
}));

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