加载资源失败：服务器响应状态为 431 (Request Header Fields Too Large)

Posted 2023-02-19

【中文标题】加载资源失败：服务器响应状态为 431 (Request Header Fields Too Large)

【英文标题】：Failed to load resource: the server responded with a status of 431 (Request Header Fields Too Large)

【发布时间】：2020-03-17 11:58:42

【问题描述】：

当我尝试从 react 应用程序（构建 MERN 堆栈应用程序）中使用我的 NodeJS api 时，我收到了问题中提到的错误 “”

邮递员的 api 工作正常

const onSubmit=async(e)=>
    e.preventDefault()
    if(password!==password2)
        console.log('passwords dont match')
    else
        const newUser=
            name:name,
            email:email,
            password:password
        
        try 
            const config=
                headers:
                    'Content-Type':'application/json'
                
            
            const body=JSON.stringify(newUser)

            //axios has been set up as proxy
            //http://localhost:3000
            //we dont need to add the above to url
            const res =await axios.post('/api/users',body,config)
            console.log(res.data)

         catch (error) 
            console.error(error.response.data)
        
    

【问题讨论】：

您是否正在发送一个非常大的 cookie？每个 Cookie 的最大大小为 4kb。

我只是从 udemy 课程中学习它，所以不知道如何检查 cookie 大小。我完全按照讲师所做的那样做。搜索谷歌，它告诉我从浏览器中清除 cookie，但这没有帮助

从邮递员那里工作正常。我得到一个令牌

奇数。这是我建议帮助调试的内容。在该路由的服务器端，执行console.log(req.headers)。然后从邮递员发出请求，然后从你的 react 应用发出请求，看看有什么区别。

注意到了一件奇怪的事情。我的 nodejs 应用程序设置在端口 3000 上，react 应用程序设置在端口 5000 上，但是尽管使用了 "proxy":"localhost:3000" 在端口 5000 上发出了发布请求包.json

【参考方案1】：

HTTP 431 Request Header Fields Too Large 响应状态代码表示 服务器拒绝处理请求，因为请求的 HTTP 标头太长。 减少请求标头的大小后，可以重新提交请求。 431 可以在请求头的总大小过大，或者单个 标头字段太大。为了帮助那些遇到此错误的人，请在响应正文中指出 > 两个中的哪一个是问题 - 理想情况下，还包括哪些标头也是 大。这让用户可以尝试解决问题，例如清除他们的 cookie。 如果出现以下情况，服务器通常会产生此状态： 引荐来源网址太长 请求中发送的 Cookie 过多

在我的情况下，我发送了太多 cookie，因为 localhost:4200 被用作 3 个不同项目的域......解决方案（删除无用的 cookie）

希望这会有所帮助...

【参考方案2】：

在运行 React 应用程序之前忘记先运行我的服务器时出现该错误。

我使用了基于 knex.js 和 express.js 的简单后端，但忘记在启动 React 之前对其进行初始化。现在一切正常。

【参考方案3】：

当我在代理目标中使用与 React 应用程序端口相同的本地端口时，我遇到了这个错误。这创建了一个内部转发循环，导致“请求标头字段太大”。

【参考方案4】：

清理浏览器缓存或使用隐身窗口打开。

【参考方案5】：

您必须关注 Traversy Media ！

从 package.json 中删除代理语句并在 axios 调用中写入节点 url

【参考方案6】：

当您回到前端并开始构建 React 钩子时，您将需要在 PC 上进行一些操作

安装跨环境库：

npm i --save-dev cross-env

更改 package.json 中的开始部分

"start": "cross-env PORT=8000 react-scripts start",

允许您声明项目的起始端口以避免与其他库冲突，在本例中为create-react-app

【参考方案7】：

431 HTTP response status code 在客户端的 HTTP 标头大于服务器接受的 HTTP 标头限制时从服务器发送。提供知名网络服务器的 HTTP 标头的最大大小here。

这完全有道理，API 在 Postman 而不是浏览器中运行良好；因为 Postman 中不会有任何残留的 cookie。

【参考方案8】：

转到 chrome 开发工具 > 应用程序 > Cookies， 清除 cookie，您就可以开始摇滚了！