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

【问题标题】：Failed to load resource: the server responded with a status of 431 (Request Header Fields Too Large)加载资源失败：服务器响应状态为 431 (Request Header Fields Too Large)
【发布时间】：2020-03-17 11:58:42
【问题描述】：

当我尝试从 react 应用程序（构建 MERN 堆栈应用程序）中使用我的 NodeJS api 时，我收到了问题中提到的错误 “加载资源失败：服务器响应状态为 431 (Request Header Fields Too Large)”

邮递员的 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

标签： node.js reactjs mongodb http http-headers

【解决方案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，您就可以开始摇滚了！

【讨论】：