Axios post request throws 431 error on submit

Question

Once the axios post request is submitted from the Register page, getting a status code 431 I am following React Hooks implementation. I have added a proxy in package.json: "proxy": "http://localhost:3000",

Error dertails: 431 (Request Header Fields Too Large) dispatchXhrRequest @ xhr.js:178 Error: Request failed with status code 431 at createError (createError.js:16)

node version: v12.16.2
"axios": "^0.19.2",
"react": "^16.13.1",

// React hooks code:

import axios from "axios";

const axios = Axios.create({
  baseURL: 'http://localhost:3000/',
   headers: {
    "Content-type": "application/json"
  }
})

// Services/RegisterService.js

import http from "../http-common";


const createPlayer = data => {
  return http.post("/register", data);
};

const updatePlayer = (id, data) => {
  return http.put(`/register/${id}`, data);
};

const removePlayer = id => {
  return http.delete(`/register/${id}`);
};


export default {
  createPlayer,
  updatePlayer,
  removePlayer
};

// Register

const Register = () => {

    const [register, setRegister] = useState({
        _id: '', profileImage: '', firstName: '', lastName: '',
        selectRole: ''
    })
    const handleSubmit = (e) => {
        e.preventDefault()
        const registerData = { profileImage: register.profileImage, firstName: register.firstName, lastName: register.lastName, selectRole: register.selectRole }
        axios.post('http://localhost:3000/register', registerData)
    }
    const onChange = (e) => {
        e.persist();
        setRegister({ ...register, [e.target.name]: e.target.value });
    }
    return (
        <div className="register_wrapper">
            <div className="register_player_column_layout_one">
                <div className="register_player_Twocolumn_layout_two">
                    <form onSubmit={handleSubmit} className="myForm">
                        <div className="formInstructionsDiv formElement">
                            <h2 className="formTitle" >Sign Up</h2>
                            <p className="instructionsText">Not registered yet, please register now !</p>
                            <div className="register_profile_image">
                                <input id="profilePic" name="profileImage" type="file" onChange={onChangePicture} />
                            </div>
                            <div className="previewProfilePic" >
                                <img onError={addDefaultSrc} name="previewImage" className="playerProfilePic_home_tile" src={picture}></img>
                            </div>
                        </div>
                        <div className="fillContentDiv formElement">
                            <div className="names formContentElement">
                                <input className="inputRequest " name="firstName" type="text" placeholder="First Name" onChange={onChange} />
                                <input className="inputRequest " name="lastName" type="text" placeholder="Last Name" onChange={onChange} />
                            </div>
                            <label>
                                <div className="select" >
                                    <select name="selectRole" id="select" onChange={onChange}>
                                        <option value="member">Member</option>
                                        <option value="admin">Admin</option>
                                    </select>
                                </div>
                            </label>
                        </div>
                        <div className="submitButtonDiv formElement">
                            <button type="submit" className="submitButton">Register</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}

export default Register;

Answer 1

I had a similar problem in the past and it was caused by a very very very long token in the request header Authorization. I don't think the problem is axios or something else, but the headers size. Can you post your headers as well?

EDIT 1: Based on this answer, you should also increase the max-http-header-size in your api service (How to fix 431 Request Header Fields Too Large in React-Redux app)