Axios请求触发431(Request Header Fields Too Large)错误，求解决方案

问题 #

使用Axios发送请求时遭遇431错误，提示请求头字段过大，以下是相关代码及错误信息：

发起请求的首页组件代码 #

import { useEffect } from "react";
import { useState } from "react";
import { useLocation } from "react-router";
import Header from "../../header/Header";
import Posts from "../../posts/Posts";
import Sidebar from "../../sidebar/Sidebar";
import "./homepage.css";
import axios from 'axios'

export default function Homepage() {
  const [posts , setPosts] = useState([]);

  useEffect(() => {
    const fetchPost = async () => {
      const res = await axios.get("/posts")
      setPosts(res.data)
    } 
    fetchPost()
},[])

  const location = useLocation();
  console.log(location);
  return (
    <>
      <Header />
      <div className="home">
        <Posts posts={posts} />
        <Sidebar />
      </div>
    </>
  );
}

后端服务器连接代码 #

const express = require("express");
const app = express();
const dotenv = require("dotenv");
const mongoose = require("mongoose");
const authRoute = require("./routes/auth");
const userRoute = require("./routes/users");
const postRoute = require("./routes/posts");
const categoryRoute = require("./routes/categories");
const multer = require("multer");
const path = require("path");

dotenv.config();
app.use(express.json());
app.use("/images", express.static(path.join(__dirname, "/images")));

mongoose
  .connect(process.env.MONGO_URL)
  .then(console.log("Connected to MongoDB"))
  .catch((err) => console.log(err));

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "images");
  },
  filename: (req, file, cb) => {
    cb(null, req.body.name);
  },
});

const upload = multer({ storage: storage });
app.post("/api/upload", upload.single("file"), (req, res) => {
  res.status(200).json("File has been uploaded");
});

app.use("/api/auth", authRoute);
app.use("/api/users", userRoute);
app.use("/api/posts", postRoute);
app.use("/api/categories", categoryRoute);

app.listen("3000", () => {
  console.log("Backend is working at 3000");
});

错误信息 #

code: "ERR_BAD_REQUEST"
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
message: "Request failed with status code 431"
name: "AxiosError"
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response: {data: '', status: 431, statusText: 'Request Header Fields Too Large', headers: AxiosHeaders, config: {…}, …}
stack: "AxiosError: Request failed with status code 431\n    at settle (http://localhost:3000/static/js/bundle.js:50094:12)\n    at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:48834:66)"
[[Prototype]]: Error

解决方案 #

• 检查请求头内容：打开浏览器开发者工具的Network面板，查看请求的Headers，重点检查Cookie、Authorization等字段是否包含过大的数据（比如超长的token、过多的Cookie条目）。
• 调整Express的请求头限制：Express默认对请求体和请求头有大小限制，修改配置扩大上限：

  // 修改express.json的限制
  app.use(express.json({ limit: '50mb' }));
  // 如果用到urlencoded，同样调整
  app.use(express.urlencoded({ extended: true, limit: '50mb' }));
  // 若使用cookie-parser，也要设置limit
  const cookieParser = require('cookie-parser');
  app.use(cookieParser({ limit: '50mb' }));
  

• 排查Axios全局配置：检查是否在Axios全局默认配置或请求拦截器中，误将大量数据添加到请求头里，避免类似如下操作：

  axios.defaults.headers.common['X-Large-Data'] = 超大内容;
  

• 清理浏览器缓存与Cookie：浏览器积累的Cookie过多也会导致请求头超标，清空对应网站的Cookie后重试。

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