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

Related searches

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!


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 with Node JS. We were using Node JS v12.x.x, and in this version, max-http-header-size reduced to 8KB from 80KB. And the auth token which I had was of around 10KB. That's why, when I reload the app, browser starts giving '431 request header fields too large' error for some of the files. I had updated the Node JS v14.x.x and it starts working again because in v14.0.0, max-http-header-size has been increased to 16KB.

Hope it will be helpful.

431 Request Headers Too Large ONLY LOCALLY � Issue #2823 , This is a React.js app with a node, express and mongoDB backend. @ TheGreekCuban It is a problem that the server can't response correctly, instead of an issue of Status Code: 431 Request Header Fields Too Large 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


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)

431 Request Header Fields Too Large, The HTTP 431 Request Header Fields Too Large response status code problem in the response body — ideally, also include which headers� Please follow the issue template below. Failure to do so will result in a delay in answering your question. Library msal@1.2.1 Framework React v16.6 Description Due to loo long cookie send in request header azure webapp returning 431 err


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

431 Request Header Fields Too Large — httpstatuses.com, HTTP Status Code 431: The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing� 431 Request Header Fields Too Large. The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields. It can be used both when the set of request header fields in total is too large, and when a single header field is at fault.


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.

Fixing 431 Request Header Fields Too Large in Node.js, You're seeing a blank page saying "HTTP_ERROR 431"? And you're running a Node js HTTP server, like express or fastify? Current behavior: Cypress returns HTTP 431 (Request Header Fields Too Large) when stubbing response with cy.route() command. After deep down to check my XHR request, it sends only 2 fields in request headers which are Accept: "applicatio


431 (Request Header Fields Too Large), Related Questions. 0. How to change order of child component props array react native. 0 Answers. 0. How� Bad Message 431 reason: Request Header Fields Too Large and also. Sarah and Bill. I had this issue in Flows, and found it to be that I had too many variables


HTTP 400 - Bad Request (Request header too long) This response could be generated by any HTTP request that includes Windows Remote Management (WinRM). Cause. This issue may occur if the user is a member of many Active Directory user groups. The HTTP request to the server contains the Kerberos token in the WWW-Authenticate header. The header


Size of a request header field exceeds server limit." Solution. First, check the website URL you entered to make sure it is correct. If the web address appears to be