后端自定义错误信息无法在前端fetch请求中正确获取显示

你无法读取自定义错误消息的核心原因有两点：

• fetch API 返回的 Response 对象不会自动解析响应体，响应内容默认以 ReadableStream 可读流格式存储在 body 字段中，直接打印 res 只能看到状态码、请求地址、响应类型这类基础元信息，拿不到实际返回内容。你控制台输出里的body: (...)就是未被解析的流内容。
• 你当前后端的错误响应通过res.send()返回纯文本格式，不是JSON结构，需要调用对应的文本解析方法才能读取内容，不能直接用JSON解析方法。

修改前端!res.ok分支逻辑，先解析响应体再读取错误消息，调整后的提交代码如下：

const onSubmit: SubmitHandler<CreateAccountFormInputs> = async (formData) => {
        try {
            setLoading(true);

            const res = await fetch('http://localhost:8000/api/user/create', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData),
            });

            if (!res.ok) {
                // 解析纯文本格式的错误响应
                const errMessage = await res.text();
                setError(errMessage);
                return;
            }

            // 注意：成功响应是JSON格式，后续如果需要使用返回的token、id字段，也要先调用await res.json()解析
            navigate('/login');
        } catch (err: any) {
            setError(err.message);
        } finally {
            setLoading(false);
        }
    }

可选优化建议：如果想统一前后端响应格式，可以把后端所有响应都改成JSON结构，比如错误场景返回res.status(409).json({ message: 'User already exists. Please log in.' })，对应前端错误分支把res.text()换成const errData = await res.json()，再取errData.message即可，后续扩展错误字段更方便。

另外你控制台打印的headers是空对象属于跨域场景的正常现象，默认情况下前端只能访问少量安全相关的响应头，如果后续需要读取自定义响应头，需要后端在CORS配置中通过Access-Control-Expose-Headers字段暴露对应头，当前读取响应体的需求不受这个影响。

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