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 // //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) } }
}8 Answers
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".
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...
0I 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.
Clean your browser cache or Open with an incognito window.
Go to chrome dev tool > Application > Cookies, Clear the cookies, and you are ready to rock!
1You must be following Traversy Media !
remove proxy statement from package.json and write node url in axios call
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-envalter 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
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.
