React+Redux发送注册POST请求报431错误的解决方案

你遇到的POST http://localhost:3000/users/register 431 (Request Header Fields Too Large)错误，核心原因是代码存在逻辑bug触发重复请求，叠加状态更新逻辑异常导致请求头体积超出服务端限制，按以下步骤修复即可：

• 首先删除RegisterPage中无依赖的useEffect块，这段代码会在页面刚加载、用户未输入任何内容时自动触发提交逻辑，是触发异常请求的核心元凶：

// 彻底删除这段代码
useEffect((event)=> {
  submitHandler()
}, [])

注册请求只需要在用户点击注册按钮、表单校验通过后触发，不需要页面加载时自动调用。

• 修复userReducer的状态更新逻辑，避免状态丢失导致的异常渲染：
  你当前的reducer在处理REGISTER_USER_REQUEST动作时，直接返回新对象覆盖了原有全部状态，会导致状态字段丢失、异常触发组件重渲染。修正后的代码：

import {actionTypes} from "../constants/action-types";

const initialState = {loading: false, userInfos: {}, error: null};

export const userReducer = (state= initialState, {type, payload}) => {
switch (type) {
    case actionTypes.REGISTER_USER_REQUEST:
        return {...state, loading: true, error: null};
    case actionTypes.REGISTER_USER_SUCCESS:
        return {...state, loading: false, userInfos: payload, error: null};
    case actionTypes.REGISTER_USER_FAIL:
        return {...state, loading: false, error: payload}
    default: 
        return state
}
}

注意把initialState里的loading默认值改成false，不然页面一进来就会处于加载状态。

• 修复userAction里的错误取值逻辑，避免把超大的错误对象存入状态：
  你当前catch块里的错误字段取值写反了，会把整个axios错误对象存入Redux，若你配置了全局axios拦截器往请求头注入状态，会直接撑大请求头体积。修正后的代码：

import { actionTypes } from "../constants/action-types";
import Axios from "axios";

const register = (name, fname, email, phone, password)=> async(dispatch) => {
    dispatch({type: actionTypes.REGISTER_USER_REQUEST, payload: {name, fname, email, phone, password}});
    try {
        const {data} = await Axios.post("http://localhost:5000/api/users/register",{name,fname,email,phone,password})
        dispatch({type: actionTypes.REGISTER_USER_SUCCESS, payload: data})
    } catch (error) {
        dispatch({
            type: actionTypes.REGISTER_USER_FAIL, 
            payload: error.response && error.response.data?.message 
                ? error.response.data.message 
                : error.message
        })
    }
}
export default register;

• 优化submitHandler逻辑，增加默认事件阻止，避免表单默认提交触发的重复请求：

const submitHandler = (event) => {
    // 阻止表单默认提交/跳转行为
    event?.preventDefault();
    if(password !== confirm) {
        window.alert("两次输入的密码不一致，请重新输入");
        return
    }
    if(!validateEmail(email)) {
        window.alert("邮箱格式不正确，请重新输入");
        return
    }
    dispatch(register(name, fname, email, phone, password))
};

• 若完成以上修改后仍报431错误，调整后端服务的请求体积限制即可：
  如果你的后端是Express服务，在入口文件中调整请求体/请求头的大小限制：

// 放在所有路由配置之前
app.use(express.json({limit: '16kb'}));
app.use(express.urlencoded({extended: true, limit: '16kb'}));

如果你在React开发环境配置了代理转发，同步调大代理的请求头限制即可。

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