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

IT技术 reactjs redux http-headers request-headers
2021-03-27 10:17:08

我正在 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 错误。任何帮助将不胜感激。谢谢!

6个回答

我在我的 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。

希望它会有所帮助。

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

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

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

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

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

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

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

应该读

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

另一种解决将是改变线proxypackage.jsonlocalhost:3000localhost:4000假设4000是实际的服务器端口。

代理解决方案对我有用;我在 React 中的 dataProvider.js 在没有代理的情况下直接访问我的后端端口,产生了这个 431 错误。将其更改为访问 '/api' 而不是 'localhost:3000/api',并将代理放入前端 package.json 中就可以了。谢谢!
2021-06-16 10:17:08