如何在 React-Redux 应用程序中修复 431 请求标头字段太大

Posted 2023-02-19

【中文标题】如何在 React-Redux 应用程序中修复 431 请求标头字段太大

【英文标题】：How to fix 431 Request Header Fields Too Large in React-Redux app

【发布时间】：2019-12-17 06:31:58

【问题描述】：

我正在 youtube 上使用 Redux 完成 MERN 注册/登录身份验证教程。尝试在 Postman 中将测试用户 POST 到服务器时，我收到 431 标头请求太大错误响应。

我在某些地方读到清除浏览器中的缓存/历史记录是有效的，所以我尝试过，但无济于事。我还在标题请求中添加了一个“Clear-Site-Data”：“*”条目（除了“Content-Type”：“application/json”），它也不起作用。

用于注册的客户端代码

  onSubmit = e => 
    e.preventDefault();
    const  name, email, password  = this.state;

    const newUser = 
      name,
      email,
      password
    ;

    this.props.register(newUser);
  ;

//redux actions
export const register = ( name, email, password ) => dispatch => 

  const config = 
    headers: 
      "Content-Type": "application/json",
      "Clear-Site-Data": "*"
    
  ;

  // Request body
  const body = JSON.stringify( name, email, password );

  axios
    .post('/api/users', body, config)
    .then(res =>
      dispatch(
        type: REGISTER_SUCCESS,
        payload: res.data
      )
    )
    .catch(err => 
      dispatch(
        returnErrors(err.response.data, err.response.status, 'REGISTER_FAIL')
      );
      dispatch(
        type: REGISTER_FAIL
      );
    );
;

注册用户应该向我连接的 Mongo db 发送名称、电子邮件和密码，但是，它停止了我并且 redux 命中了我创建的 REGISTER_FAIL 类型并返回 431 错误。任何帮助将不胜感激。谢谢！

【问题讨论】：

您使用的服务器是什么？您的快递服务器是否位于 nginx 后面？您使用的是什么快速中间件？此外，提供实际的 HTTP 请求将非常有用。

【参考方案1】：

我在我的 Angular 应用程序中遇到了同样的问题。花了很多时间后，我发现这个问题与 Node JS 有关。我们使用的是 Node JS v12.x.x，在这个版本中，max-http-header-size 从 80KB 减少到了 8KB。我拥有的身份验证令牌约为 10KB。这就是为什么当我重新加载应用程序时，浏览器开始为某些文件提供“431 请求标头字段太大”错误。我更新了 Node JS v14.x.x，它又开始工作了，因为在 v14.0.0 中，max-http-header-size 已增加到 16KB。

希望对您有所帮助。

【参考方案2】：

我在使用 localhost（不限于 redux）时遇到了类似的问题。也许这可能会有所帮助。 把它放到 url: chrome://settings/?search=cache 单击清除浏览数据。 勾选 cookie 和其他站点数据（很重要，因为 cookie 在 HTTP 标头中） 勾选缓存的图像和文件（可能是可选的）

【参考方案3】：

另一个建议是在检查器工具中访问您的 cookie，然后删除。适用于您的 localhost:port 应用程序的 cookie。

【讨论】：

这对我有用。谢谢！

【参考方案4】：

不是 reactjs，而是使用 vue-cli，对于像我这样的人，只是愚蠢它可能会有所帮助：

我在端口 8080 上启动了我的 Vue 应用程序，而我的本地后端在端口 4000 上运行。但是我的请求指向8080，而我从 Webpack Serving 得到的响应是“431 Request Header Fields Too Large”。

简单的解决方案就是使用正确的后端端口。尽管这是我的一个非常愚蠢的错误，但错误信息在这里有点用处。

【参考方案5】：

这意味着您正在尝试在当前的前端开发服务器上执行此提取。您需要指定服务器地址。例如：

.post('/api/users', body, config)

应该阅读

.post('http://localhost:4000/api/users', body, config)

另一个解决方法是将package.json 中的proxy 行从localhost:3000 更改为localhost:4000，假设4000 是您的实际服务器端口。

【讨论】：

代理解决方案对我有用；我在 React 中的 dataProvider.js 在没有代理的情况下直接访问我的后端端口，产生了这个 431 错误。将其更改为访问“/api”而不是“localhost:3000/api”，并将代理放入前端 package.json 就可以了。谢谢！

【参考方案6】：

是来自 Brad Travery 的课程吗？检查package.json中的“代理”，或者尝试在axios请求中使用完整的url。更改后我必须完全重新启动服务器，因为它仍然使用旧端口（顺便说一句，我输入了错误的端口）

【参考方案7】：

我遇到的问题是我试图访问 src 目录中的文件。解决方法是将其移至public 目录，现在可以正常工作了。

例如 来自

public
 - index.html
 - favicon.ico
 - etc
src
 > access-me
 - App.tsx
 - etc

到

public
 > access-me
 - index.html
 - favicon.ico
 - etc
src
 - App.tsx
 - etc

【参考方案8】：

固定在https://***.com/a/56351573/9285308

（最大http头大小参数可配置）：

node --max-http-header-size 16000 client.js

【参考方案9】：

在我的 react 应用程序中，我添加了 --max_old_space_size 标志并且它可以工作。当前启动脚本是：

"start": "react-scripts --expose-gc --max_old_space_size=12000 start",

【参考方案10】：

只要找到解决办法，

NETCORE 6.0 / React 模板 VS 2022

您必须使用您的 url asp net application 的值在 package.json 中设置代理 url！ AspNet URL in debug console

因此，当您使用默认 React/AspNetCore 项目的代理并且您没有在 package.json 中设置代理 url（或有效的）时，您可能会遇到 431 错误。

proxy url in package.json