logo标签列表

如何在React-Redux应用程序中修复“431 Request Header Fields Too Large”错误

reactjsreduxhttp-headersrequest-headers
24

我正在观看一个使用Redux的MERN注册/登录认证教程的Youtube视频。当我尝试在Postman中向服务器发送测试用户时，接收到了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错误。任何帮助将不胜感激。谢谢！

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

你正在使用哪个服务器？你的Express服务器是否在Nginx后面？你正在使用哪些Express中间件？此外，提供实际的HTTP请求将非常有用。 - swazza85
14个回答
21

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

希望这对你有所帮助。

这个网站在无痕模式下对我有效，所以我觉得这个解决方案可能会起作用，而且确实起作用了。 - dwilt
15

另一个建议是进入检查器工具访问你的 cookie 并删除适用于 localhost:{port} 应用程序的 cookie。

8

不是使用Reactjs，而是使用vue-cli。对于像我这样的人，只要愚蠢一些，它可能会有所帮助:

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

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

8

我曾经在使用localhost（不仅限于redux）时也遇到过类似的问题。也许这个方法能帮到你。
在浏览器中输入以下网址：chrome://settings/?search=cache
点击"清除浏览数据"
勾选"cookies和其他站点数据"(重要，因为cookie在HTTP头部)
勾选"缓存的图像和文件"（可以选择性地勾选）

3
这意味着您正在尝试在当前的前端开发服务器上进行此获取操作。您需要指定服务器地址。例如： .post('/api/users', body, config) 应该改为：
.post('http://localhost:4000/api/users', body, config)

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

1
代理方案是对我有效的解决方法；我的React中的dataProvider.js直接访问后端端口而没有使用代理，导致了431错误。将其更改为访问'/api'而不是'localhost:3000/api'，并将代理放入前端package.json中即可解决问题。谢谢！ - Jeff Breadner
0
在我的React应用程序中，我添加了--max_old_space_size标志，并且它已经起作用了。当前的启动脚本是：
"start": "react-scripts --expose-gc --max_old_space_size=12000 start",
0
我遇到的问题是我试图访问位于“src”目录中的文件。解决方法是将其移动到“public”目录中，现在它可以正常工作了。

E.g. From

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

到

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

刚找到一个解决方案：

NETCORE 6.0 / React 模板 VS 2022

您必须在 package.json 中设置代理 URL，其值为 asp net 应用程序的 URL！在调试控制台中的 AspNet URL

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

package.json 中的代理 URL

0
0

这是来自Brad Travery的课程吗？在package.json中检查“proxy”，或尝试在axios请求中使用完整的URL。我不得不完全重启服务器才能使更改生效，因为它仍然使用旧端口（顺便说一下，我输入了错误的端口）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接