如何修复React-Redux应用中的431请求头字段过大错误

Let's break down this 431 error and fix it step by step: first, the error means the total size of your request headers exceeds the server's configured limit. The Clear-Site-Data header you added is meant to tell browsers to clear local data—it doesn't address the server-side header size restriction, which is why it didn't resolve the issue. Here's what to do next:

1. Audit Your Request Headers in Postman #

First, check exactly what headers are being sent to the server:

• Open your POST request in Postman, navigate to the Headers tab.
• Look for large or redundant headers, especially:
  • Cookie: Postman might automatically send old/large cookies from previous test sessions. Disable the "Send cookies" toggle in the request settings to test with a clean header set.
  • Unintended custom headers: Sometimes Postman's history or browser extensions can add unexpected headers you didn't mean to include.

2. Adjust Server-Side Header Limits (Express) #

By default, Express caps request header size at around 8KB. If your headers are legitimately larger (or you're sending large cookies), you need to increase this limit:

• In your Express server setup, modify the express.json() and cookie-parser middleware to accept larger headers:

// Add this near the top of your server.js/index.js
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

// Increase limit for JSON body and headers
app.use(express.json({ limit: '100kb' })); // Adjust value to fit your needs
app.use(express.urlencoded({ extended: true, limit: '100kb' }));

// If using cookie-parser, set a larger limit for cookie headers
app.use(cookieParser({ limit: '10kb' }));

Note: Stick to the smallest limit that works for your use case to avoid unnecessary security risks.

3. Clean Up Client-Side Request Configuration #

Your Redux action includes an unnecessary Clear-Site-Data header, and Axios might be automatically adding large headers (like cookies) without your knowledge. Adjust your action like this:

export const register = ({ name, email, password }) => dispatch => {
  const config = {
    headers: {
      "Content-Type": "application/json"
      // Remove "Clear-Site-Data": "*" — it's irrelevant for API requests
    },
    withCredentials: false // Add this if you don't need to send cookies to the server yet
  };
  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 });
    });
};

4. Test with a Fresh Postman Request #

Postman can cache old headers or cookies from previous tests. Create a new, clean request:

• Manually add only the Content-Type: application/json header.
• Send the raw JSON body with your user data (name, email, password).
  This ensures you're not sending any leftover headers that could bloat the request.

After trying these steps, your POST request should go through without the 431 error, and the user data will be saved to MongoDB as expected.

内容的提问来源于stack exchange，提问作者Brent Abruzese