Question

当我尝试使用React应用程序中的NodeJS api（构建MERN堆栈应用程序）时，我遇到了所提到的错误 “无法加载资源：服务器响应状态为431（请求标头字段太大）”

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)
        }
    }
}

Answer 1

在运行React应用之前忘记先运行服务器时，我遇到了该错误。

我使用了基于knex.js和express.js的简单后端，并且在启动React之前忘了初始化它。现在一切正常。

Answer 2

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

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

希望这对您有帮助...

Answer 3

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

Answer 4

回到前端并开始构建React挂钩时，您将需要在PC上进行一些跳跃

安装跨环境库：

npm i --save-dev cross-env

更改package.json中的开始部分

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

允许您声明项目的开始端口，以避免与其他库冲突，在这种情况下为create-react-app

Answer 5

您必须关注Traversy Media！

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

Answer 6

当客户端的HTTP标头大于服务器接受的HTTP标头限制时，会从服务器发送

431 HTTP response status code。 here提供了知名Web服务器的HTTP标头的最大大小。

完全可以理解，该API在Postman而非浏览器上都可以正常工作；因为邮递员中不会有任何残留Cookie。

Answer 7

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

加载资源失败：服务器响应状态为431（请求标头字段太大）

7 个答案: