CODEWITHSUNDEEP
javascriptreactjsjsonbrowser
Pradeep
Pradeep

Reputation: 193

431 (Request Header Fields Too Large)

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

Upvotes: 8

Views: 19893

Answers (5)

Cliff Njoroge
Cliff Njoroge

Reputation: 130

If your reading a large json object like a geojson feature collection use JSON.parse on the object prior to use

Upvotes: 0

Yilmaz
Yilmaz

Reputation: 49571

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

Upvotes: 12

Nikhil Bhardwaj
Nikhil Bhardwaj

Reputation: 582

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

Upvotes: 1

Gourav Kajal
Gourav Kajal

Reputation: 261

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

Upvotes: 1

neeta sanas
neeta sanas

Reputation: 81

Clearing site data from browser worked for me:

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

Upvotes: 7

Related Questions