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

Question

我正在使用 Redux 在 youtube 上完成 MERN 注册/登录授权教程。当尝试在 Postman 中将测试用户发布到服务器时，我收到 431 header request is too large 错误响应。

我在一些地方读到清除浏览器中的缓存/历史记录是有效的，所以我试过了但没有用。我还在标题请求中添加了一个“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 数据库发送姓名、电子邮件和密码，但是，它停止了我并且 redux 命中了我创建的 REGISTER_FAIL 类型并返回 431 错误。任何帮助将不胜感激。谢谢！

Answer 1

我在我的 Angular 应用程序中遇到了同样的问题。花了很多时间后，我发现问题与 Node.js 有关。

我们使用的是 Node.js

v12.x.x

，在这个版本中，

max-http-header-size

从

8KB

缩减为

80KB

。我拥有的身份验证令牌在

10KB

附近。这就是为什么当我重新加载应用程序时，浏览器开始为某些文件提供

431 request header fields too large

错误。

我将 Node.js 更新为

v14.x.x

，它再次开始工作，因为在

v14.0.0

中，

max-http-header-size

已增加到

16KB

.

希望对您有所帮助

Answer 2

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

localhost:{port}

应用程序的 cookie。

Answer 3

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

Answer 4

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

我在端口

8080

上启动了我的 Vue 应用程序，而我的本地后端在端口

4000

上运行。但是我的请求指向

8080

，我从Webpack Serving 得到的响应是“431 Request Header Fields Too Large”。

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

Answer 5

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

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

应该读

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

另一个修复方法是将

proxy

中的

package.json

行从

localhost:3000

更改为

localhost:4000

，假设4000是您的实际服务器端口。

Answer 6

我遇到的问题是我试图访问

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

Answer 7

是 Brad Travery 的课程吗？在

package.json

中选中“代理”，或者尝试在axios请求中使用完整的url。更改后我必须完全重启服务器，因为它仍在使用旧端口（顺便说一句，我输入了错误的端口）

Answer 8

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

（最大 http header size 参数是可配置的）：

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

Answer 9

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

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

Answer 10

只需更改 package.json 文件中的启动脚本即可。

"start": "react-scripts --max-http-header-size=1024 start",

Answer 11

NextJS 解决方案： https://stackoverflow.com/a/73136780/6725458

"dev": "concurrently next dev node --max-http-header-size=64555 api-server"

Answer 12

刚刚找到解决方案：

NETCORE 6.0 / React 模板 VS 2022

您必须在 package.json 中使用您的 url asp net 应用程序的值设置代理 url！

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

Answer 13

当我通过混淆端口不小心创建了前端本身的代理时，我遇到了这个问题。

我在端口 5000 上有一个后端，在端口 3000 上有一个 create-react-app。

我放

  "proxy": "http://localhost:3000",

在

package.json

。这显然是一个错误，因为它通过一遍又一遍地查询 React 应用程序导致无限递归。

我通过输入正确的端口号（显然）修复了它

  "proxy": "http://localhost:5000",

您的特定情况下的端口号当然可能会有所不同，为了完整起见，请将此答案放在这里。