Failed to load resource: the server responded with a status of 431 (Request Header Fields Too Large) - node.js

Question

when i am trying to use my NodeJS api from the react app(building a MERN stack app) i get the error mentioned in question
"Failed to load resource: the server responded with a status of 431 (Request Header Fields Too Large)"
the api is working fine from postman
const onSubmit=async(e)=>{
e.preventDefault()
if(password!==password2){
console.log('passwords dont match')
}else{
const newUser={
name:name,
email:email,
password:password
}
try {
const config={
headers:{
'Content-Type':'application/json'
}
}
const body=JSON.stringify(newUser)
//axios has been set up as proxy
//http://localhost:3000
//we dont need to add the above to url
const res =await axios.post('/api/users',body,config)
console.log(res.data)
} catch (error) {
console.error(error.response.data)
}
}
}

Answer 1

The HTTP 431 Request Header Fields Too Large response status code indicates that the
server refuses to process the request because the request’s HTTP headers are too long.
The request may be resubmitted after reducing the size of the request headers.
431 can be used when the total size of request headers is too large, or when a single
header field is too large. To help those running into this error, indicate which of the > two is the problem in the response body — ideally, also include which headers are too
large. This lets users attempt to fix the problem, such as by clearing their cookies.
Servers will often produce this status if:
The Referer URL is too long
There are too many Cookies sent in the request
In my case I was sending too many cookies because localhost:4200 was used as the domain of 3 different projects ... The solution (delete useless cookies)
Hope this helps...

Answer 2

I was getting this error when I used the same local port in the proxy destination as the port of the React app by accident. This created an internal forwarding loop, resulting in "Request Header Fields Too Large".

Answer 3

I was getting that error when forgetting to run my server first, before running React app.
I used a knex.js and express.js based simple back end and forgot to initialise it before starting React. Now it all works fine.

Answer 4

Clean your browser cache or Open with an incognito window.

Answer 5

Go to chrome dev tool > Application > Cookies,
Clear the cookies, and you are ready to rock!

Answer 6

You must be following Traversy Media !
remove proxy statement from package.json and write node url in axios call

Answer 7

After I used chrispytoe's suggestion to debug, I knew the problem is related to wrong URL, but not axios or React. To be more specific, something related to the URL on the server side.
Here's what I would suggest to help debug. On the server side in that
route, do console.log(req.headers). Then make the request from
postman, then make it from your react app and see what the differences
are. – chrispytoe
How I fixed this problem is to make sure the proxy server port in my client's packcage.json the same as my server.js' port number. Add the line below to the end of your's client's package.json (before the last "}").
"proxy": "http://localhost:5500"
Next, set your server.js' port the same as your proxy's port:
const PORT = process.env.PORT || 5500;
In addition, it doesn't matter what port you configure your client to use. It has nothing to do with the server and its proxy server.
Hope my 2 cents help. Please feel free to correct me. Thanks.

Answer 8

This error arises when the API server port you inputted in your front-end proxy(e.g "proxy":"http://localhost:5000/") isn't the same as the port on the server.

Answer 9

when you get back to the front end and start building React hooks, you'll have a to do a bit of jumping around on a PC
install cross-env lib:
npm i --save-dev cross-env
alter your start section in package.json
"start": "cross-env PORT=8000 react-scripts start",
allow you to declare the start port of the project to avoid conflict with other libs, in this case the create-react-app

Answer 10

431 HTTP response status code is sent from the server when client's HTTP Header is greater than the server's accepting HTTP Header limit. Maximum size of HTTP Header for well-known web-server is provided here.
This makes complete sense that the API is working fine from Postman and not browser; As there won't be any residue cookies present in Postman.