reactjs - Axios 发布请求在提交时抛出 431 错误

Question

从注册页面提交 axios post 请求后，获取状态代码 431 我正在关注 React Hooks 实现。我在 package.json 中添加了一个代理:“代理”:“http://localhost:3000”，

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

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

//React 钩子(Hook)代码:

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

我过去遇到过类似的问题，它是由请求 header 授权中的非常非常长的 token 引起的。我认为问题不是 axios 或其他问题，而是标题大小。您也可以发布标题吗？

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