431 (Request Header Fields Too Large)

Question

GET http://localhost:3000/data/posts.json 431 (Request Header Fields Too Large) I am getting an error mentioned above. I am using local server "npm server" (No Xampp or WAMP)

JSON file is downloaded from here "https://gorest.co.in/public-api/users?_format=json&access-token=UrX-V34IN7O-1TV0HEaVUCRUz65B9-ibL6M1" I have downloaded this file on the local server.

My Code is:

const API = './data/posts.json';

componentDidMount(){

        fetch(API)
        .then(response => response.text())
        .then( (data) => { console.log("data - ", data) } )
    }

Yilmaz · Answer 1 · 2023-03-11T20:15:57.700

10

You need to delete all the saved cookies for your localhost:3000. Because if you start your 10 different projects at "localhost:3000" and if each saves cookie, everytime you make a request, all those cookies will be attached to the req object

1-chrome settings

2-on the left menu, click on Privacy and security tab

3-go to "privacy and security" section

4-click on site settings

5-click "view permissions and data stored across sites"

6-find localhost and on the right menu reset data

edited Mar 11 '23 at 20:15

answered Apr 12 '20 at 05:15

Yilmaz

35,338
10
157
202

1

Using CRA locally on port 3000, I was getting this error. You saved me a tonne of time yilmaz! Thank you – Andrew Boyd May 23 '21 at 19:36
Using Next.js with AWS Amplify and you helped me as well. Thank you. – john-raymon Mar 11 '23 at 19:04

score 6 · Answer 2 · edited May 16 '20 at 22:58

6

Clearing site data from browser worked for me:

Go to console -> select application -> Clear Storage -> Clear Site Data

edited May 16 '20 at 22:58

Ajeet Shah

18,551
8
57
87

answered Feb 21 '20 at 10:17

neeta sanas

71
3

score 1 · Answer 3 · answered Jun 30 '20 at 09:06

1

If you are using Node v12.x.x, then try to upgrade it to v14.x.x.

answered Jun 30 '20 at 09:06

Gourav Kajal

231
2
3

score 1 · Answer 4 · answered Jan 07 '22 at 15:16

In my case, I was getting this error because I was calling an API before my document load, so I was passing jwt_token in the header and so my API was called before JWT TOKEN assignment.

I was using JQuery:

This was my previous code:

let manager_list_cache = JSON.parse(localStorage.getItem("manager_list_cache"));

    if (manager_list_cache && manager_list_cache.length > 0) {
        manager_list = manager_list_cache
    } else {
        // rendering managers
        getMethod(jwt_token, '/api/manager/all_manager/')
            .then(data => {
                localStorage.setItem("manager_list_cache", JSON.stringify(data));
            })//api.js
    }

And this is my latest code, I wrapped it in document ready function

$(document).ready(function () {
    let manager_list_cache = JSON.parse(localStorage.getItem("manager_list_cache"));

    if (manager_list_cache && manager_list_cache.length > 0) {
        manager_list = manager_list_cache
    } else {
        // rendering managers
        getMethod(jwt_token, '/api/manager/all_manager/')
            .then(data => {
                localStorage.setItem("manager_list_cache", JSON.stringify(data));
            })//api.js
    }
})

As you can see my getMethod() is looking strange but I'm using some function behind, so I have to pass only JWT TOKEN and API to make a call

431 (Request Header Fields Too Large)

4 Answers4

Linked