axios post请求提交时抛出431错误

Question

一旦从注册页面提交 axios 发布请求，获得状态码 431 我正在关注 React Hooks 的实现。我在 package.json 中添加了一个代理： "代理": "http://localhost:3000",

错误详情： 431（请求标头字段太大） dispatchXhrRequest@xhr.js:178 错误：请求失败，状态码 431 在 createError (createError.js:16)

node version: v12.16.2
"axios": "^0.19.2",
"react": "^16.13.1",

// React 钩子代码：

import axios from "axios";

const axios = Axios.create({
  baseURL: 'http://localhost:3000/',
   headers: {
    "Content-type": "application/json"
  }
})

//服务/RegisterService.js

import http from "../http-common";


const createPlayer = data => {
  return http.post("/register", data);
};

const updatePlayer = (id, data) => {
  return http.put(`/register/${id}`, data);
};

const removePlayer = id => {
  return http.delete(`/register/${id}`);
};


export default {
  createPlayer,
  updatePlayer,
  removePlayer
};

// 注册

const Register = () => {

    const [register, setRegister] = useState({
        _id: '', profileImage: '', firstName: '', lastName: '',
        selectRole: ''
    })
    const handleSubmit = (e) => {
        e.preventDefault()
        const registerData = { profileImage: register.profileImage, firstName: register.firstName, lastName: register.lastName, selectRole: register.selectRole }
        axios.post('http://localhost:3000/register', registerData)
    }
    const onChange = (e) => {
        e.persist();
        setRegister({ ...register, [e.target.name]: e.target.value });
    }
    return (
        <div className="register_wrapper">
            <div className="register_player_column_layout_one">
                <div className="register_player_Twocolumn_layout_two">
                    <form onSubmit={handleSubmit} className="myForm">
                        <div className="formInstructionsDiv formElement">
                            <h2 className="formTitle" >Sign Up</h2>
                            <p className="instructionsText">Not registered yet, please register now !</p>
                            <div className="register_profile_image">
                                <input id="profilePic" name="profileImage" type="file" onChange={onChangePicture} />
                            </div>
                            <div className="previewProfilePic" >
                                <img onError={addDefaultSrc} name="previewImage" className="playerProfilePic_home_tile" src={picture}></img>
                            </div>
                        </div>
                        <div className="fillContentDiv formElement">
                            <div className="names formContentElement">
                                <input className="inputRequest " name="firstName" type="text" placeholder="First Name" onChange={onChange} />
                                <input className="inputRequest " name="lastName" type="text" placeholder="Last Name" onChange={onChange} />
                            </div>
                            <label>
                                <div className="select" >
                                    <select name="selectRole" id="select" onChange={onChange}>
                                        <option value="member">Member</option>
                                        <option value="admin">Admin</option>
                                    </select>
                                </div>
                            </label>
                        </div>
                        <div className="submitButtonDiv formElement">
                            <button type="submit" className="submitButton">Register</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}

export default Register;

Answer 1

我过去也遇到过类似的问题，它是由请求标头授权中的一个非常非常长的令牌引起的。我不认为问题出在 axios 或其他问题上，而是标题大小。你也可以发布你的标题吗？

编辑 1： 基于这个答案，你还应该在你的api服务中增加max-http-header-size（How to fix 431 Request Header Fields Too Large in React-Redux app）

Answer 2

我不知道这是一个好的答案。 但这对我有用。

只需关闭选项卡并再次重新运行程序。 它修复了错误。

Answer 3

Wikipedia 说

什么导致错误 443 ？

443错误可能是windows系统文件损坏造成的。损坏的 Windows 系统文件条目可能对您的计算机的健康构成真正的威胁。

可能有许多事件可能导致系统文件错误。不完整的安装、不完整的卸载、应用程序或硬件的不当删除。如果您的计算机从病毒或广告软件/间谍软件攻击中恢复，或者由于计算机不正确关闭，也可能导致此问题。所有上述活动都可能导致 Windows 注册表中的条目被删除或损坏。此损坏的注册表将导致应用程序正常工作所需的信息和文件丢失和错误链接。

如何轻松修复（错误 443）？

有两 (2) 种方法可以修复 443 错误：

高级计算机用户解决方案（手动恢复）：

• 启动计算机并以管理员身份登录。
• 单击开始按钮，然后选择所有程序、附件、系统工具，然后单击系统还原。 3) 在新窗口中，选择“将我的计算机恢复到较早的时间”选项，然后单击下一步。 4) 从“在此列表中，单击一个还原点”列表中选择最近的系统还原点，然后单击“下一步”。 5) 在确认窗口中单击下一步。 6) 还原完成后重新启动计算机。

  ---

还有一个非常好的包调用npm i axios-es6-class 它允许你使用 axios 作为 es6 类之类的东西。