React中使用Fetch API提交数据出现400状态码错误，求解析

错误类型说明 #

400状态码属于客户端错误，意思是服务器无法理解你的请求，大概率是请求格式不对、必填参数缺漏，或者请求头配置出了问题。

你的代码里的问题点 #

• mode: "no-cors" 是错误配置：开启这个模式后，浏览器会强制限制请求的响应内容，你根本拿不到服务器返回的真实错误信息，而且很多自定义请求头会被浏览器自动过滤，直接导致请求不符合服务器要求。
• Content-Type 格式错误：你写的 "application/json, charset=utf-8" 不对，正确写法是用分号分隔："application/json; charset=utf-8"。
• Access-Control-Allow-Origin 不该加在请求头：这个是服务器返回给浏览器的响应头，用来处理跨域，你作为客户端加在请求里完全没用，反而可能干扰服务器解析。
• 未处理HTTP错误：fetch只有网络层面的错误才会触发catch，像400、500这类HTTP状态码错误会直接进入then，你现在直接跳转页面，根本没判断请求是否成功。

修复后的代码 #

function register() {
    const item = { email };
    console.log(item);

    const requestOptions = {
        method: "POST",
        headers: {
            "Content-Type": "application/json; charset=utf-8",
            Accept: "application/json, text/plain, */*",
        },
        body: JSON.stringify({ email: email }),
    };

    fetch(`${process.env.REACT_APP_BASE_URL}v1/auth/email-signup`, requestOptions)
        .then(async (response) => {
            // 先判断请求是否成功
            if (!response.ok) {
                // 解析服务器返回的错误详情
                const errorDetails = await response.json();
                console.error("服务器返回错误:", errorDetails);
                throw new Error(`请求失败，状态码：${response.status}`);
            }
            console.log("response", response);
            navigate("/otp");
        })
        .catch((e) => {
            console.log("请求异常:", e);
        });
}

额外排查建议 #

• 检查process.env.REACT_APP_BASE_URL的取值，确保拼接后的接口地址正确。
• 确认email变量是否有值，避免提交空邮箱导致服务器返回400。
• 打开浏览器开发者工具的Network面板，查看请求的Request Payload是否为正确的JSON格式，同时查看服务器返回的Response内容，里面一般会有具体错误提示，这是最快定位问题的方法。

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