使用ExpressJS开发登录表单遇响应问题：服务器收数据但客户端未接收

服务器能正确接收请求数据，但客户端无法获取响应，核心问题出在Fetch API的响应处理缺失，同时存在请求头设置不规范的问题，以下是具体修复步骤：

问题诊断 #

服务器端能打印req.body，说明请求已成功送达，但客户端没有处理Fetch返回的Promise，导致无法获取服务器响应；另外手动设置的Content-Type: text/html不符合请求体格式，会造成不必要的解析歧义。

修复方案 #

1. 处理Fetch的响应Promise #

Fetch是异步API，必须通过await或.then()来接收并解析服务器返回的响应数据，否则客户端不会处理服务器的返回内容。

2. 修正请求头（可选但更规范） #

使用URLSearchParams作为请求体时，浏览器会自动设置正确的Content-Type: application/x-www-form-urlencoded，无需手动设置错误的text/html头。

修正后的客户端代码 #

formLogin.onsubmit = async () => {
    validateLogin() // 登录验证函数
    validatePassword() // 密码验证函数
    if (loginCorrect && hasloCorrect) {
        const formData = new FormData(formLogin)

        for (let [keyValue, value] of formData) {
            const encrypt = new safeData(value)
            await encrypt.setAsyncData()
            formData.set(keyValue, encrypt.encryptedData)
        }

        const reqBody = new URLSearchParams(formData)
        const url = "http://127.0.0.1:3030/login";

        try {
            // 发送请求并等待响应
            const response = await fetch(url, {
                method: "POST",
                body: reqBody,
            });
            // 解析服务器返回的JSON数据
            const result = await response.json();
            console.log("服务器响应:", result);
            // 可根据响应结果执行后续操作，比如页面跳转
            // if (result.status === 'SUCCESS') { window.location.href = '/home'; }
        } catch (error) {
            console.error("请求失败:", error);
        }
    }

    return false;
}

服务器端优化（可选） #

虽然当前res.send()可以返回JSON，但使用res.json()更明确地标识返回格式：

app.post('/login',(req,res) => {
    console.log(req.body)
    res.json({ status: 'SUCCESS' })
})

原生表单提交正常的原因 #

原生表单提交由浏览器自动处理响应流程（比如页面跳转），而Fetch API是纯异步的，必须手动编写响应处理逻辑，这是两者的核心区别。

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