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

Question

当我尝试从 React 应用程序（构建 MERN 堆栈应用程序）使用我的 NodeJS api 时，出现问题“无法加载资源：服务器响应状态为 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

\n

HTTP 431 Request Header Fields Too Large 响应状态代码表示\n服务器拒绝处理请求，因为请求\xe2\x80\x99s HTTP 标头太长。\n减小请求标头的大小后，可能会重新提交请求当请求头的总大小太大或者单个头字段太大时，可以使用431。为了帮助那些遇到此错误的人，请指出响应正文 \xe2\x80\x94 中的问题是以上两个中的哪一个，最好还包括哪些标头太大\n。这使用户可以尝试解决问题，例如通过清除 cookie。\n如果出现以下情况，服务器通常会生成此状态：\nReferer URL 太长\n请求中发送的 Cookie 过多

\n

\n

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

\n

希望这可以帮助...

\n

Answer 2

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

Answer 3

当我忘记在运行 React 应用程序之前先运行我的服务器时，我收到了该错误。我使用了基于 knex.js 和express.js 的简单后端，但忘记在启动 React 之前初始化它。现在一切正常。

Answer 4

当你回到前端并开始构建 React hooks 时，你将需要在 PC 上进行一些跳转

安装跨环境库：

npm i --save-dev cross-env

更改 package.json 中的开始部分

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

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