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

Question

我正在 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 数据库发送姓名、电子邮件和密码，但是，它使我停止并且 redux 命中我创建的 REGISTER_FAIL 类型，返回 431 错误。任何帮助将不胜感激。谢谢！

Answer 1

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

希望它会有所帮助。

Answer 2

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

我在 port 上启动了我的 Vue 应用程序8080，并且我的本地后端在 port 上运行4000。然而，我的请求指出8080，并且我从 Webpack Serving 得到的响应是“431 请求标头字段太大”。

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

Answer 3

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

Answer 4

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