CODEWITHSUNDEEP
node.jsreactjsmongodbhttphttp-headers
Swagath Shetty
Swagath Shetty

Reputation: 301

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

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)
        }
    }
}

Upvotes: 16

Views: 63684

Answers (10)

Henry2
Henry2

Reputation: 409

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.

Upvotes: 1

LED Fantom
LED Fantom

Reputation: 1373

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.

Upvotes: 3

baru
baru

Reputation: 47

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.

Upvotes: 5

Sandeep Gantait
Sandeep Gantait

Reputation: 875

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

Upvotes: 6

Ariod
Ariod

Reputation: 5851

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".

Upvotes: 10

Oshadha Punchihewa
Oshadha Punchihewa

Reputation: 110

Clean your browser cache or Open with an incognito window.

Upvotes: 4

Yashwin Munsadwala
Yashwin Munsadwala

Reputation: 514

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.

Upvotes: 0

Anand
Anand

Reputation: 195

You must be following Traversy Media !

remove proxy statement from package.json and write node url in axios call

Upvotes: 1

Yadiana Molina
Yadiana Molina

Reputation: 309

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...

Upvotes: 19

Scott Hyslop
Scott Hyslop

Reputation: 21

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

Upvotes: 0

Related Questions