Did you just try to visit a website only to be met by the HTTP error 431 message? Or, maybe you have your own website and you’re getting complaints from visitors that they see this error when visiting your site?
HTTP status codes like the 431 error can be frustrating because they get in the way of the website that you want to interact with. Thankfully, though, the error code provides you with the information that you need to fix it in the form of those three numbers – 431.
In this post, you’ll learn what this specific error means and what some of the common causes are. Then, we’ll share four troubleshooting steps that you can follow to fix the problem, whether you’re experiencing it on someone else’s website or your own website.
Check Out Our Video Guide to Fixing the 431 Error
What Is HTTP Error 431?
Before we can talk about the HTTP error 431 specifically, we first need to talk about what HTTP is and where these errors come from.
When you visit a website, your web browser needs a way to communicate with the webserver behind that website. It does this using HTTP, which stands for Hypertext Transfer Protocol.
Your web browser sends an HTTP request to the server for certain information – e.g. the website’s code or an image file. Then, the server sends an HTTP response back to the browser.
Along with these requests and responses, browsers and servers also include HTTP status codes, which are numerical codes like 431.
There are tons of different status codes. In fact, we have an entire guide on HTTP status codes. Some HTTP status codes indicate that everything is functioning normally. However, many HTTP status codes indicate some type of error.
As you can probably guess, the HTTP 431 message is one of the error codes. The number 431 indicates the specific HTTP error, which is “Request Header Fields Too Large.”
Essentially, this means that the HTTP request that your browser is making to the server is too large. Or, another way of phrasing it is that the request is too long.
This can happen because the total size of the request headers is too large or it can happen because a single header field is too large.
Because your browser is making a request that is too large/long, the server drops/denies the request instead of delivering the HTTP response that your browser was expecting.
Because your browser doesn’t receive the needed response, it’s unable to render the webpage and shows the HTTP error 431 message instead.
Did you just try to visit a website only to be met by the HTTP error 431 message? This post is for you 👀Click to Tweet
What Causes a 431 Request Header Fields Too Large Error?
In general, HTTP error codes can indicate a problem in two different areas:
- Server-side – there’s something going wrong in the webserver that’s triggering the error code.
- Client-side – there’s something going wrong in the web browser that’s triggering the error.
The HTTP error 431 is a client-side HTTP error. That means the cause of the problem is somewhere in your web browser (because your web browser is the one making the request with large headers). That also means that you’ll need to apply most fixes by adjusting your web browser.
However, the root cause isn’t always your browser’s fault. Sometimes the way that the website is coded can cause your browser to make large requests.
Typically, the HTTP error 431 is caused by issues with cookies, long referrer URLs, or just the total size of the request headers.
If you’re trying to visit someone else’s website, you can try to eliminate these causes by adjusting your web browser.
If you have your own website and you’re trying to diagnose why your site’s visitors are seeing the HTTP error 431, you might need to dig into your site’s code to make it less likely to cause your site’s visitors to have large requests. For example, you might need to adjust how your site uses cookies in visitors’ browsers or configure your server to accept larger requests.
How To Fix HTTP Error 431 (4 Methods)
Now that you know what the HTTP Error 431 Request Header Fields Too Large message means and some of its causes, let’s get into how you can fix this error.
1. Clear Your Cookies and Browser Cache
Pretty much all websites use cookies to identify and store information about individual users. For example, if you log into a website, that website will use a cookie to remember that you’re logged in so that you don’t need to log in again on every single visit.
To learn more about cookies, check out our guide to cookies and PHP sessions.
However, if there are too many cookies, that can lead to large HTTP request headers, which can trigger the HTTP Error 431 Request Header Fields Too Large message.
One common fix, therefore, is to clear the cookies for the site where you’re experiencing issues. Most popular browsers make this pretty easy to do – we’ll show you below.
Here’s how to clear browser cookies in Chrome:
- Enter the following in your browser address bar – chrome://settings/content/all.
- Search for the URL of the site where you’re experiencing issues.
- Click the trash can icon to delete all of the cookies and site data for that site.
The basic method above should also work for other Chromium-based web browsers, such as Brave, Edge, Vivaldi, Opera, and others. However, you’ll need to go through the settings area rather than pasting in the URL.
To clear cookies for a specific site in Safari, follow these instructions:
- Open the Preferences area (Safari > Preferences).
- Select the Privacy tab.
- Click Manage Website Data.
- Search for and select the site where you’re experiencing issues.
- Click the Remove button once you’ve selected the site.
To clear cookies for a specific site in Firefox, follow these instructions:
- Enter the following in your Firefox browser address bar – about:preferences#privacy.
- Scroll down and find the Cookies and Site Data section.
- Click the Manage Data button in that section.
- Search for and select the site where you’re experiencing issues.
- Click the Remove Selected button once you’ve selected the site.
2. Shorten or Remove URL Query Parameters
Trying to visit a site using URLs with long query parameters can also trigger the HTTP error 431.
Query parameters are the part of a URL that comes after the “main” URL. They’re used to pass additional information to the server, but they aren’t actually required to access the page in most cases.
For example, many sites use UTM parameters to track conversions. Here’s an example of a base URL – https://yoursite.com/ — with some additional query parameters:
https://yoursite.com/?utm_source=Facebook&utm_medium=CtW&utm_campaign=PC&fbclid=IwAR3ph8rkY1UfPOzhbrqPWBGqLXFsFeAP48otBX1F0Ao2Y1RYydAJqms_RQU
To see if this is the problem, delete the question mark and everything that comes after it (the bolded portion above). Then, try revisiting the newly cleaned URL and see if the error disappears.
3. Shorten/Edit Your Code (if Writing Custom Code)
These next two tips won’t help if you’re experiencing the error on someone else’s website. But if you’re experiencing the error on your own site (or if your visitors are complaining of experiencing the error), then these tips can help address the root cause.
The first option is to dig into your site’s code and check if your code is generating large request headers. That is, whether your code is forcing visitors’ browsers to send large requests.
These errors are especially common when working with JavaScript. If you check out StackOverflow, you’ll see that most of the people experiencing this error are using technologies such as AngularJS, React, Node.js, etc.
For example, your Node.js app could be asking for more information than is needed, which is generating unnecessarily large request headers. Similarly, remember that spaces in your code count towards the size of the request, so that can be another “invisible” source of large requests.
In some cases, you can also adjust the maximum request size at the server level by editing your server’s configuration code. For example, if you’re using React, you can adjust the max header size in the package.json file – look for this line of code:
"start": "react-scripts --max-http-header-size=1024 start",
4. Adjust Cookie Settings (if Your Site Triggers Errors for Users)
Another way that your site could trigger the HTTP error 431 is the way in which it’s using cookies.
For example, if you’re setting lots of cookies in users’ browsers, that could trigger the error. This is one of the reasons why clearing a site’s cookies is one of the potential fixes.
To avoid this, make sure that you’re not setting too many cookies by accident. This will require digging into your site’s code or hiring an expert with the qualifications to do so.
HTTP status codes like the 431 error can be frustrating because they get in the way of the website that you want to interact with. 😅 This guide is here to help 🚀Click to Tweet
Summary
The HTTP Error 431 Request Header Fields Too Large error is a client-side error that appears when your web browser makes a request to the server with headers that are too large and/or long.
Because the request is too large, the server rejects the request, which is why your web browser displays the HTTP Error 431 message instead of the content that you were expecting.
If you’re experiencing this error when visiting another site, the most common fix is to clear your browser’s cookies for that site. You should also make sure that the URL isn’t too long because of query parameters.
If you’re experiencing this error when visiting your own site (or your visitors are complaining about this error), you’ll likely need to dig into your code to make sure you aren’t generating large request headers or setting too many cookies. In some cases, you might also be able to increase the maximum request header size at the server level by editing your server’s configuration files.
To learn more about HTTPS status codes in general, check out our full guide to HTTP status codes. We also have a number of posts focused on fixing other common HTTP errors, including Internal Server, Bad Requests, Bad Gateway, Not Found Errors.
Get all your applications, databases and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:
- Easy setup and management in the MyKinsta dashboard
- 24/7 expert support
- The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
- An enterprise-level Cloudflare integration for speed and security
- Global audience reach with up to 35 data centers and 275 PoPs worldwide
Test it yourself with $20 off your first month of Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.
Did you just try to visit a website only to be met by the HTTP error 431 message? Or, maybe you have your own website and you’re getting complaints from visitors that they see this error when visiting your site?
HTTP status codes like the 431 error can be frustrating because they get in the way of the website that you want to interact with. Thankfully, though, the error code provides you with the information that you need to fix it in the form of those three numbers – 431.
In this post, you’ll learn what this specific error means and what some of the common causes are. Then, we’ll share four troubleshooting steps that you can follow to fix the problem, whether you’re experiencing it on someone else’s website or your own website.
Check Out Our Video Guide to Fixing the 431 Error
What Is HTTP Error 431?
Before we can talk about the HTTP error 431 specifically, we first need to talk about what HTTP is and where these errors come from.
When you visit a website, your web browser needs a way to communicate with the webserver behind that website. It does this using HTTP, which stands for Hypertext Transfer Protocol.
Your web browser sends an HTTP request to the server for certain information – e.g. the website’s code or an image file. Then, the server sends an HTTP response back to the browser.
Along with these requests and responses, browsers and servers also include HTTP status codes, which are numerical codes like 431.
There are tons of different status codes. In fact, we have an entire guide on HTTP status codes. Some HTTP status codes indicate that everything is functioning normally. However, many HTTP status codes indicate some type of error.
As you can probably guess, the HTTP 431 message is one of the error codes. The number 431 indicates the specific HTTP error, which is “Request Header Fields Too Large.”
Essentially, this means that the HTTP request that your browser is making to the server is too large. Or, another way of phrasing it is that the request is too long.
This can happen because the total size of the request headers is too large or it can happen because a single header field is too large.
Because your browser is making a request that is too large/long, the server drops/denies the request instead of delivering the HTTP response that your browser was expecting.
Because your browser doesn’t receive the needed response, it’s unable to render the webpage and shows the HTTP error 431 message instead.
Did you just try to visit a website only to be met by the HTTP error 431 message? This post is for you 👀Click to Tweet
What Causes a 431 Request Header Fields Too Large Error?
In general, HTTP error codes can indicate a problem in two different areas:
- Server-side – there’s something going wrong in the webserver that’s triggering the error code.
- Client-side – there’s something going wrong in the web browser that’s triggering the error.
The HTTP error 431 is a client-side HTTP error. That means the cause of the problem is somewhere in your web browser (because your web browser is the one making the request with large headers). That also means that you’ll need to apply most fixes by adjusting your web browser.
However, the root cause isn’t always your browser’s fault. Sometimes the way that the website is coded can cause your browser to make large requests.
Typically, the HTTP error 431 is caused by issues with cookies, long referrer URLs, or just the total size of the request headers.
If you’re trying to visit someone else’s website, you can try to eliminate these causes by adjusting your web browser.
If you have your own website and you’re trying to diagnose why your site’s visitors are seeing the HTTP error 431, you might need to dig into your site’s code to make it less likely to cause your site’s visitors to have large requests. For example, you might need to adjust how your site uses cookies in visitors’ browsers or configure your server to accept larger requests.
How To Fix HTTP Error 431 (4 Methods)
Now that you know what the HTTP Error 431 Request Header Fields Too Large message means and some of its causes, let’s get into how you can fix this error.
1. Clear Your Cookies and Browser Cache
Pretty much all websites use cookies to identify and store information about individual users. For example, if you log into a website, that website will use a cookie to remember that you’re logged in so that you don’t need to log in again on every single visit.
To learn more about cookies, check out our guide to cookies and PHP sessions.
However, if there are too many cookies, that can lead to large HTTP request headers, which can trigger the HTTP Error 431 Request Header Fields Too Large message.
One common fix, therefore, is to clear the cookies for the site where you’re experiencing issues. Most popular browsers make this pretty easy to do – we’ll show you below.
Here’s how to clear browser cookies in Chrome:
- Enter the following in your browser address bar – chrome://settings/content/all.
- Search for the URL of the site where you’re experiencing issues.
- Click the trash can icon to delete all of the cookies and site data for that site.
The basic method above should also work for other Chromium-based web browsers, such as Brave, Edge, Vivaldi, Opera, and others. However, you’ll need to go through the settings area rather than pasting in the URL.
To clear cookies for a specific site in Safari, follow these instructions:
- Open the Preferences area (Safari > Preferences).
- Select the Privacy tab.
- Click Manage Website Data.
- Search for and select the site where you’re experiencing issues.
- Click the Remove button once you’ve selected the site.
To clear cookies for a specific site in Firefox, follow these instructions:
- Enter the following in your Firefox browser address bar – about:preferences#privacy.
- Scroll down and find the Cookies and Site Data section.
- Click the Manage Data button in that section.
- Search for and select the site where you’re experiencing issues.
- Click the Remove Selected button once you’ve selected the site.
2. Shorten or Remove URL Query Parameters
Trying to visit a site using URLs with long query parameters can also trigger the HTTP error 431.
Query parameters are the part of a URL that comes after the “main” URL. They’re used to pass additional information to the server, but they aren’t actually required to access the page in most cases.
For example, many sites use UTM parameters to track conversions. Here’s an example of a base URL – https://yoursite.com/ — with some additional query parameters:
https://yoursite.com/?utm_source=Facebook&utm_medium=CtW&utm_campaign=PC&fbclid=IwAR3ph8rkY1UfPOzhbrqPWBGqLXFsFeAP48otBX1F0Ao2Y1RYydAJqms_RQU
To see if this is the problem, delete the question mark and everything that comes after it (the bolded portion above). Then, try revisiting the newly cleaned URL and see if the error disappears.
3. Shorten/Edit Your Code (if Writing Custom Code)
These next two tips won’t help if you’re experiencing the error on someone else’s website. But if you’re experiencing the error on your own site (or if your visitors are complaining of experiencing the error), then these tips can help address the root cause.
The first option is to dig into your site’s code and check if your code is generating large request headers. That is, whether your code is forcing visitors’ browsers to send large requests.
These errors are especially common when working with JavaScript. If you check out StackOverflow, you’ll see that most of the people experiencing this error are using technologies such as AngularJS, React, Node.js, etc.
For example, your Node.js app could be asking for more information than is needed, which is generating unnecessarily large request headers. Similarly, remember that spaces in your code count towards the size of the request, so that can be another “invisible” source of large requests.
In some cases, you can also adjust the maximum request size at the server level by editing your server’s configuration code. For example, if you’re using React, you can adjust the max header size in the package.json file – look for this line of code:
"start": "react-scripts --max-http-header-size=1024 start",
4. Adjust Cookie Settings (if Your Site Triggers Errors for Users)
Another way that your site could trigger the HTTP error 431 is the way in which it’s using cookies.
For example, if you’re setting lots of cookies in users’ browsers, that could trigger the error. This is one of the reasons why clearing a site’s cookies is one of the potential fixes.
To avoid this, make sure that you’re not setting too many cookies by accident. This will require digging into your site’s code or hiring an expert with the qualifications to do so.
HTTP status codes like the 431 error can be frustrating because they get in the way of the website that you want to interact with. 😅 This guide is here to help 🚀Click to Tweet
Summary
The HTTP Error 431 Request Header Fields Too Large error is a client-side error that appears when your web browser makes a request to the server with headers that are too large and/or long.
Because the request is too large, the server rejects the request, which is why your web browser displays the HTTP Error 431 message instead of the content that you were expecting.
If you’re experiencing this error when visiting another site, the most common fix is to clear your browser’s cookies for that site. You should also make sure that the URL isn’t too long because of query parameters.
If you’re experiencing this error when visiting your own site (or your visitors are complaining about this error), you’ll likely need to dig into your code to make sure you aren’t generating large request headers or setting too many cookies. In some cases, you might also be able to increase the maximum request header size at the server level by editing your server’s configuration files.
To learn more about HTTPS status codes in general, check out our full guide to HTTP status codes. We also have a number of posts focused on fixing other common HTTP errors, including Internal Server, Bad Requests, Bad Gateway, Not Found Errors.
Get all your applications, databases and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:
- Easy setup and management in the MyKinsta dashboard
- 24/7 expert support
- The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
- An enterprise-level Cloudflare integration for speed and security
- Global audience reach with up to 35 data centers and 275 PoPs worldwide
Test it yourself with $20 off your first month of Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.
HTTP error 431 returns the status code: Request header fields too large
You’ve tried to look at content on your own website, and you’ve hit an error. Read through it, and you’ll know that the system thinks «request header fields too large.» But you have no idea what that means.
HTTP errors are meant to give you information about the communication between your device and a website server. But the codes were written for developers, not average people. And even experts can be confused by obscure codes like this one.
Fixing HTTP error 431 is relatively easy once you know what to look for. We’ll walk you through the steps.
Understand the HTTP Language
The acronym HTTP stands for «hypertext transfer protocol,» which was established in 1991. Think of this protocol as the language of requests and responses between devices and servers.
Each time you visit a website, a predictable set of steps happens.
- Browser request: You need data or information from the web server to visit the page.
- Data movement: Buried within that request is information about you, your browser, and more.
- The server’s response: You’re either given access, or you get a code that explains the denial.
Requests are sometimes called «headers.» The HTTP protocol doesn’t specify how long or big these pieces of data can be. But some servers limit size for security reasons.
And that’s where HTTP error 431 comes in.
Unpacking HTTP Error 431
Several types of HTTP errors exist, and they’re numerically grouped. All of the codes in the 400 level involve user errors. These aren’t problems that technically originate with the website or your server. Instead, they involve some kind of request from the user that a website’s server can’t process.
Error 431, which officially says «Request header fields too large,» means the server has dropped the request. The header sent by the user is either too long or too large, and the server denies it.
Web developers can request all kinds of data from users. You might ask for information about these things:
- Preferred languages
- Credentials
- Hosts
- Referring sites
If you ask for too much information, or the data you get back is somehow chunky or lengthy, your user will hit this error code. The page won’t load until the problem is resolved.
Fix Error 431 in 4 Steps
Every HTTP error 431 message is different, and your website could throw up this barrier for reasons that don’t apply to other businesses you know. But for most companies, the problem comes down to one of two factors.
Your visitors could see the code due to cookies or the referring URL is too long.
Try fixing the problem by:
- Eliminating the referrer URL. If you know you have active links on a site with a very long URL, eliminate this query before allowing access.
- Walking through your code. Spaces in your code are applied toward character limits, and they’re not always needed. You could also ask for data you never use or need, which could force users up against your character limits.
- Examining your cookie settings. If you have authorization code mistakes, you could be setting multiple cookies for your users, and that could cause unwelcome HTTP errors.
- Accepting more cookies. If cookies are at the crux of your problem, let more in. Cookies do come with security vulnerabilities, so proceed with care. But if eliminating an error code at all costs is your goal, accepting more cookies could be helpful.
You may need to talk with your server host before making some changes. If you adjust your code to accept more data, but your server doesn’t agree, your users could hit a similar HTTP code involving server access. An open conversation before you adjust code is always wise.
Get Help From Okta
If HTTP errors plague you, we can help. We’ll walk through the problems with you, and we’ll figure out how to give your users access without compromising your security. Contact us to find out more.
References
Brief History of HTTP. High Performance Browser Networking. O’Reilly.
Additional HTTP Status Codes. (April 2012). Internet Engineering Task Force.
Risk Associated With Cookies. (November 2013). Infosec.
5 Tips to Avoid Potential Dangers of Cookies. (November 2020). C Online Mag.
I have a deployed application and I am experiencing an issue with my contact form. This is a React.js app with a node, express and mongoDB backend. It is deployed on Heroku.
On the deployed version everything works great. When a user enters their information into the contact form it runs API.saveLead()
which runs a axios.post()
hits the contact/lead
route. The data is saved to the database. Then API.sendMail()
is called which runs a axios.post()
to the contact/lead
route. The data is packaged and appropriately sent to the desired email address using the nodemailer package.
Although everything is functioning appropriately on on the deployed version, when I click submit on the contact form ON THE LOCAL VERSION, I get a 431 Request headers too large error. It doesn’t clear the form, nothing is saved to the local db (I don’t think) and the nodemailer module is never even fired.
Here is the error:
xhr.js:155 POST http://localhost:3000/contact/lead 431 (Request Header Fields Too Large)
Below is the code related to the form submission, its routes and interaction with the mongoose.js model and controller in the backend.
The handleFormSubmit() calls the saveLead method on the API module which returns the axios routes. The axios route hits the backend where express router handles the routes which then use mongoose.js for the models and controller (leadController.js).
React Component handleFormSubmit API Call:
handleFormSubmit = event => {
event.preventDefault();
let options = {
Name: this.state.fullName,
Email: this.state.email,
Phone: this.state.phone,
Message: this.state.message
}
if (this.state.fullName && this.state.email) {
this.saveLead(options)
}
};
//saveLead function
saveLead = options => {
API.saveLead(options)
.then(res => {
this.sendMail(options)
console.log("RES: ", res)
})
.then(res => {
this.setState({ fullName: "", phone: "", email: "", message: "",
prevState: res})
})
.catch(err => {
console.log("[1]err happening here", err)
});
}
API Axios Call To Backend:
// Saves a contact info and messaege to the database
saveLead: function(leadData) {
return axios.post("/contact/lead", leadData);
},
sendMail: function(mailData) {
return axios.post("/contact/mail", mailData);
},
API Routes (backend):
// API Routes
router.use("/contact", contactRoutes);
Lead route (/contact/):
//Lead route
router.use("/lead", leadRoutes);
Lead Route (/contact/lead):
// Matches with "/contact/lead"
router.route("/")
.get(leadController.findAll)
.post(leadController.create);
leadController.js:
create: function(req, res) {
db.Lead
.create(req.body)
.then(response => res.send(response))
.catch(err => res.status(422).json(err));
},
findAll: function(req, res) {
db.Lead
.find({})
.sort({ date: -1 })
.then(dbModel => res.json(dbModel))
.catch(err => res.status(422).json(err));
}
Lead Model (db.Lead is used above). This is the mongoose model:
const leadSchema = new Schema({
Name: { type: String, required: true },
Email: { type: String, required: true },
Phone: String,
Message: String,
Date: { type: Date, default: Date.now }
});
const Lead = mongoose.model("Lead", leadSchema);
The link to my gitHub can be found here: https://github.com/TheGreekCuban/agavepv
The link to the deployed site can be found here: https://www.agavepv.com
Environment:
- Axios Version ^0.18.1
- OS: OSX 10.14.6
- Browser: Chrome (80.0.3987.132), Brave(1.4.96)
- Additional Library Versions: React 16.12.0, Express ^4.16.3, Mongoose: ^5.3.16,
We have a several Power BI Service reports that have been refreshing without errors for six months. Recently, we’ve started getting this msg:
An error occurred while processing the data in the dataset.
Refresh failed:
«RDDS Individual Rpt»[hyperlinked] has failed to refresh.
Failure details: The last refresh attempt failed because of an internal service error. This is usually a transient issue. If you try again later and still see this message, contact support.
Web.Contents failed to get contents from ‘https://site.my.salesforce.com/services/data/v29.0/query?q=SELECT%20Id%2COwnerId%2CIsDeleted%2CName%……
…2CExpECM__ECM_Placement_Sequence__c%2CExpECM__ECM_Sharing__c%2CE’ (431): Request Header Fields Too Large. The exception was raised by the IDataReader interface. Please review the error message and provider documentation for further information and corrective actiion.
Table: Case_Record
As background, we are a nonprofit providing Social Worker support for indviduals. We saw this msg a few month ago on some older reports that hadn’t used Power Query Editor to reduce the number of fields brought into the Power BI Case Record table. That worked, but now we are again seeing this msg… But this error msg is listing fields that are screened by PQE and not brought into the Power BI model. And we don’t get refresh errors when we refresh > publish in PBI Desktop (see screenshot below.)
And we’ve confirmed that the newly published Dataset/Report is the one displaying refreshed data (final screenshot.)
Also, the refresh always fails on the «ExpECM__ECM_Sharing__c» field (approximately after 1k characters) although it’s confirmed as empty — and why would Request Headers be Too Large??
From some research, this may be related to cookies…which could explain why this has recently started happening… but we’re not finding any references to others with this same problem in Power BI
Seems like I need to learn more about IDataReader but I’m not a coder so any suggested next steps would be much appreciated!
And the re-published report was showing Data that was refreshed on 12/15
successful build of report