在 React 注册组件中处理 Axios POST 请求中的 411 Length required 错误

Question

我正在使用react、express、mongodb、mongoose、tailwind构建一个支付应用程序（paytm应用程序），我为前端制作了单独的组件和页面。但是当我只是试图从我的注册页面前端到后端访问后端时。然后我收到这个错误。 这是我的注册页面代码：

import { useState } from "react"
import { ButtonWarning } from "../components/BottomWarning"
import { Button } from "../components/Button"
import { Heading } from "../components/Heading"
import { InputBox } from "../components/InputBox"
import { SubHeading } from "../components/SubHeading"
import axios from "axios"

export const Signup = () => {
    const [firstName, setFirstName] = useState("");
    const [lastName, setLastName] = useState("");
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    return <div className="bg-slate-300 flex justify-center h-screen">
        <div className="flex flex-col justify-center">
            <div className="rounded-lg bg-white p-2 w-80 text-center h-max px-4">
                <Heading label={"Sign Up"} />
                <SubHeading label={"Enter your information to create an account"} />
                <InputBox onChange={e => {
                    setFirstName(e.target.value);
                }} label={"First Name"} placeholder={"Ratnesh"}/>
                <InputBox onChange={e => {
                    setLastName(e.target.value);
                }} label={"Last Name"} placeholder={"Kumar"}/>
                <InputBox onChange={e => {
                    setUsername(e.target.value);
                }} label={"Email"} placeholder={"[email protected]"}/>
                <InputBox onChange={e => {
                    setPassword(e.target.value);
                }} label={"Password"} placeholder={"Aa!@123"} />
                <div className="pt-4">
                    <Button onClick={() => {
                        axios.post("http://localhost:3000/api/v1/user/signup", {
                            username,
                            firstName,
                            lastName,
                            password
                        });
                    }} label={"Sign Up"}/>
                </div>
                <ButtonWarning label={"Already have an account?"} buttonText={"Sign in"} to={"/signin"} />
            </div>
        </div>
    </div>
}

这是我的后端database.js代码：

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/paytm');

const userSchema = mongoose.Schema({
    username: {
        type: String,
        required: true,
        unique: true,
        trim: true,
        lowercase: true,
        minLength: 3,
        maxLength: 30
    },
    firstName: {
        type: String,
        required: true,
        trim: true,
        maxLength: 50
    },
    lastName: {
        type: String,
        required: true,
        trim: true,
        maxLength: 50
    },
    password: {
        type: String,
        required: true,
        trim: true,
        minLength: 6
    },
});

const accountSchema = mongoose.Schema({
    userId: {
        type: mongoose.Schema.Types.ObjectId,
        ref: 'User',
        required: true
    },
    balance: {
        type: Number,
        required: true
    }

})

const User = mongoose.model('User', userSchema);
const Account = mongoose.model('Account', accountSchema);

module.exports ={
    User,
    Account
};

我尝试添加

<Button onClick={() => {
                        axios.post("http://localhost:3000/api/v1/user/signup", {
                            username,
                            firstName,
                            lastName,
                            password
                        },{
                            headers: {
                                 "Content-type": "application/json"
}
});
                    }} label={"Sign Up"}/>

我希望我的前端能够正确命中后端

Answer 1

411状态码表示服务器需要Content-Length标头，当请求格式不正确或未设置Content-Type时，通常会丢失该标头。在您的情况下，由于后端需要 JSON 数据，因此您需要确保请求在标头中明确指定这一点。

您需要修改您的

axios.post

请求以包含具有值

Content-Type

的

application/json

标头。这告诉服务器请求正文包含 JSON 数据。

您可以这样做：

<Button onClick={() => {
    axios.post("http://localhost:3000/api/v1/user/signup", 
        {
            username,
            firstName,
            lastName,
            password
        }, 
        {
            headers: {
                'Content-Type': 'application/json'
            }
        }
    ).catch(error => {
        console.error("There was an error!", error);
    });
}} label={"Sign Up"}/>