Axios发布请求在提交时引发431错误

时间:2020-05-13 08:42:54

标签: reactjs axios react-hooks

从注册页面提交axios发布请求后,得到状态码431我正在关注React Hooks的实现。我在package.json中添加了一个代理: “ proxy”:“ 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"
  }
})

// Services / 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;

enter image description here

3 个答案:

答案 0 :(得分:0)

过去我也遇到过类似的问题,这是由于请求标头Authorization中的令牌非常长而引起的。我不认为问题出在axios或其他东西上,而是标题大小。您也可以张贴标题吗?

编辑1: 根据此答案,您还应该在api服务(How to fix 431 Request Header Fields Too Large in React-Redux app)中增加max-http-header-size

答案 1 :(得分:0)

Wikipedia

什么原因导致错误443?

443错误可能是Windows系统文件损坏引起的。损坏的Windows系统文件条目可能是对计算机健康的真正威胁。

可能有许多事件可能导致系统文件错误。安装不完全,卸载不完全,应用程序或硬件的不正确删除。如果您的计算机是从病毒或广告软件/间谍软件攻击中恢复的,或者是由于计算机的不当关机而导致的,也可能是由于这种情况引起的。以上所有活动均可能导致Windows注册表中条目的删除或损坏。损坏的注册表将导致丢失和错误链接的信息以及正确运行应用程序所需的文件。

如何轻松修复(错误443)?

有两种(2)解决443错误的方法:

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

还有一个非常好的软件包调用CustomDialog,它允许您将axios用作 es6-class和东西。

答案 2 :(得分:0)

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

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