CODEWITHSUNDEEP
reactjsreduxhttp-headersrequest-headers
Brent Abruzese
Brent Abruzese

Reputation: 301

How to fix 431 Request Header Fields Too Large in React-Redux app

I'm working through a MERN sign up/login auth tutorial on youtube that uses Redux. When attempting to POST a test user to the server in Postman, I receive the 431 header request is too large error response.

I've read in some places that clearing the cache/history in your browser works, so I've tried that to no avail. I've also added in a "Clear-Site-Data": "*" entry to the header request (in addition to "Content-Type": "application/json") which hasn't worked, either.

Client Side Code for Sign Up

  onSubmit = e => {
    e.preventDefault();
    const { name, email, password } = this.state;

    const newUser = {
      name,
      email,
      password
    };

    this.props.register(newUser);
  };

//redux actions
export const register = ({ name, email, password }) => dispatch => {

  const config = {
    headers: {
      "Content-Type": "application/json",
      "Clear-Site-Data": "*"
    }
  };

  // Request body
  const body = JSON.stringify({ name, email, password });

  axios
    .post('/api/users', body, config)
    .then(res =>
      dispatch({
        type: REGISTER_SUCCESS,
        payload: res.data
      })
    )
    .catch(err => {
      dispatch(
        returnErrors(err.response.data, err.response.status, 'REGISTER_FAIL')
      );
      dispatch({
        type: REGISTER_FAIL
      });
    });
};

The user sign up should be sending a name, email and password to my connected Mongo db, however, it halts me and redux hits the REGISTER_FAIL type I created returning the 431 error. Any help would be greatly appreciated. Thank you!

Upvotes: 30

Views: 84341

Answers (14)

Patryk Babula
Patryk Babula

Reputation: 1

If you're using NEXT.js you can pass node arguments directly to next commands in package.json/cli

"dev": "NODE_OPTIONS='--max-http-header-size=12800000' next dev"

Reference: https://nextjs.org/docs/app/api-reference/next-cli

Upvotes: 0

Gourav Kajal
Gourav Kajal

Reputation: 261

I had faced the same issue in my Angular Application. After spending a lot of time, I had found out that the issue is related to Node.js.

We were using Node.js v12.x.x, and in this version, max-http-header-size was reduced to 8KB from 80KB. And the auth token which I had was around 10KB. That's why, when I reload the app, the browser starts giving 431 request header fields too large error for some of the files.

I updated the Node.js to v14.x.x, and it started working again because, in v14.0.0, max-http-header-size has been increased to 16KB.

Hope it will be helpful.

Upvotes: 24

unkulunkulu
unkulunkulu

Reputation: 11922

I had this problem when I accidentally created a proxy to the frontend itself by mixing up the port.

I had a backend on port 5000 and create-react-app on port 3000.

I put

  "proxy": "http://localhost:3000",

in the package.json. This is clearly a mistake as it leads to infinite recursion by querying the react app over and over.

I fixed it (obviously) by putting the correct port number

  "proxy": "http://localhost:5000",

Port numbers in your particular case might vary of course, just put this answer here for completess sake.

Upvotes: 0

Jean-Philippe
Jean-Philippe

Reputation: 1

Just found a solution:

NETCORE 6.0 / React template VS 2022

You have to setup the proxy url in package.json with the value of your url asp net application! AspNet URL in debug console

So you can have that 431 error when you use the proxy of default React/AspNetCore project and you don't setup a proxy url (or a valid one) in the package.json.

proxy url in package.json

Upvotes: 0

Shaze
Shaze

Reputation: 987

NextJS solution: https://stackoverflow.com/a/73136780/6725458

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

Upvotes: 0

Muhammad Muzamil
Muhammad Muzamil

Reputation: 1252

Just change your start script in package.json file and you are good to go.

"start": "react-scripts --max-http-header-size=1024 start",

Upvotes: 0

cansu
cansu

Reputation: 1142

In my react app, I add --max_old_space_size flag and it is worked. Current start script is :

"start": "react-scripts --expose-gc --max_old_space_size=12000 start",

Upvotes: 0

Kipras Melnikovas
Kipras Melnikovas

Reputation: 419

Fixed in https://stackoverflow.com/a/56351573/9285308

(the max http header size parameter is configurable):

node --max-http-header-size 16000 client.js

Upvotes: 0

Karl Adler
Karl Adler

Reputation: 16836

Not reactjs, but using vue-cli, for people like me, just being stupid it may help:

I started my Vue app on port 8080, and my local backend was running at port 4000. However my requests pointed to 8080 and the response I got from Webpack Serving was "431 Request Header Fields Too Large".

The plain solution was just to use the right backend-port. Even though that was a really stupid mistake of me, the error message is kinda useless here.

Upvotes: 8

Toan Ka
Toan Ka

Reputation: 117

Is it from Brad Travery's course? Check "proxy" in package.json, or try using full url in axios request. I had to completely restart server after changes, bc it's still use the old port (btw, I was enter wrong port)

Upvotes: 0

Nate Levin
Nate Levin

Reputation: 1118

The issue I was having is that I was trying to access a file in the src directory. The fix is to move it to the public directory and it now works fine.

E.g. From

public
 - index.html
 - favicon.ico
 - etc
src
 > access-me
 - App.tsx
 - etc

to

public
 > access-me
 - index.html
 - favicon.ico
 - etc
src
 - App.tsx
 - etc

Upvotes: 0

JhWebDev
JhWebDev

Reputation: 402

Another suggestion would be to access your cookies, in the inspector tool, and delete. applicable cookies for your localhost:{port} application.

Upvotes: 17

Richard Bonneau
Richard Bonneau

Reputation: 1214

It means you are trying to do this fetch on your current front-end development server. You need to specifiy the server address. For example:

.post('/api/users', body, config)

should read

.post('http://localhost:4000/api/users', body, config)

Another fix would be to change the line proxy in your package.json from localhost:3000 to localhost:4000 assuming that 4000 is your actual server port.

Upvotes: 3

hansss
hansss

Reputation: 521

I had similar problems with just using localhost(not limited to redux). Maybe this might help.
Put this into url: chrome://settings/?search=cache
Click on Clear Browsing data.
Tick cookies and other site data (Important since cookies is in HTTP header) TIck cached images and files (might be optional)

Upvotes: 8

Related Questions