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;

This is mostly because your URL is incorrect. I don't think the problem is with axios. Have you tried accessing your URL using Postman or Swagger? — Sandy, May 13 '20 at 08:48
Did you set up a [proxy](https://create-react-app.dev/docs/proxying-api-requests-in-development/) in package.json? — HMR, May 13 '20 at 09:30
No, I haven’t setup a proxy yet. May I know why do we need a proxy ? — soccerway, May 13 '20 at 09:33
I have set the proxy, restart the server. Now getting `status Code: 431 Request Header Fields Too Large` — soccerway, May 13 '20 at 11:43

score 1 · Answer 1 · answered May 13 '20 at 11:53

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)

answered May 13 '20 at 11:53

Tasos

1,880
13
19

How would i get request headers in axios ? – soccerway May 13 '20 at 12:26
I have tried below code in handleSubmit: and console.log my variable... `var myreq = axios.interceptors.request.use(request => { console.log('Starting Request', request) return request })` – soccerway May 13 '20 at 12:28
But i am getting 0 – soccerway May 13 '20 at 12:28
I am not setting/sending any token details at the moment though.. – soccerway May 13 '20 at 12:29
After changing to proxy to 4000 Proxy error: Could not proxy request /[object%20Object] from localhost:3000 to http://localhost:4000/ (ECONNREFUSED). – soccerway May 13 '20 at 13:24
Do you have developer access to the api that you try to connect with? – Tasos May 13 '20 at 14:22
Yes i do have access to that api – soccerway May 13 '20 at 14:25
Can you try increasing the `max-http-header-size` setting on the api side? – Tasos May 13 '20 at 14:26
I have set the size `set NODE_OPTIONS=--max-http-header-size=80` – soccerway May 13 '20 at 23:01
Try increasing it to 80000 :) – Tasos May 14 '20 at 13:18

score 0 · Answer 2 · answered Jul 27 '22 at 11:03

You can increase the header-size on type of server you're using,

Node version v13.13.0 & above defaults to 16K prior it was set to 8K, you can increase it further but not a good practise. If you are using NextJS, you can use the --max-http-header-size={number} parameter to temporarily accommodate a workaround fix in package.json to 64K for example -

"scripts": {
"dev": "concurrently next dev node --max-http-header-size=64555 api-server",

Tutorial Ref: https://tutorial.tips/what-is-the-max-http-header-size-in-nodejs-server/

nodejs: https://nodejs.org/dist/latest-v16.x/docs/api/cli.html#--max-http-header-sizesize

score -1 · Answer 3 · answered Mar 14 '21 at 19:10

-1

I don't know this is a good answer. But this worked for me.

Just close the tab and rerun the program again. It fixed the bug.

answered Mar 14 '21 at 19:10

Sujeewa K. Abeysinghe

337
3
4

score -3 · Answer 4 · answered May 13 '20 at 23:17

Wikipedia says

What causes error 443 ?

The 443 error may be caused by windows system files damage. The corrupted windows system files entries can be a real threat to the well being of your computer.

There can be many events which may have resulted in the system files errors. An incomplete installation, an incomplete uninstall, improper deletion of applications or hardware. It can also be caused if your computer is recovered from a virus or adware/spyware attack or by an improper shutdown of the computer. All the above actives may result in the deletion or corruption of the entries in the windows registry. This corrupted registry will lead to the missing and wrongly linked information and files needed for the proper working of the application.

How to easily fix (error 443)?

There are two (2) ways to fix 443 Error:

Advanced Computer User Solution (manual restore):

Start your computer and log on as an administrator.
Click the Start button then select All Programs, Accessories, System Tools, and then click System Restore. 3) In the new window, select "Restore my computer to an earlier time" option and then click Next. 4) Select the most recent system restore point from the "On this list, click a restore point" list, and then click Next. 5) Click Next on the confirmation window. 6) Restarts the computer when the restoration is finished.

Also there is a very good package call npm i axios-es6-class it allows you to use axios as es6-class and stuff.

I did'nt get that ? Sorry this is an `POST http://localhost:3000/[object%20Object] 431 (Request Header Fields Too Large)` error code 431 ... — soccerway, May 13 '20 at 23:22
where do you get this: `POST http://localhost:3000/[object%20Object]` from ? — Ernesto, May 13 '20 at 23:26
basically POST `[object%20Object]` this is the problem you should send strings, not objects — Ernesto, May 13 '20 at 23:27
During `handleSubmit` it triggering the post, I have even tried like this, but still not good `const { value } = e.target.elements.firstName axios.post('http://localhost:3000/register', { firstName: value })` — soccerway, May 13 '20 at 23:38

Axios post request throws 431 error on submit

4 Answers4

What causes error 443 ?

How to easily fix (error 443)?

Linked