AxiosError：请求失败，状态代码为 400（在 React JS 中）

Question

我正在尝试使用 axios 发表评论。当我提交在表单中输入的数据时，我在控制台中看到此错误：

AxiosError {消息：'请求失败，状态代码为 400'，名称：'AxiosError'，代码：'ERR_BAD_REQUEST'，配置：{...}，请求：XMLHttpRequest，...}

这是我的代码：

import React, { useState } from 'react'
import TextField from '@material-ui/core/TextField';
import { Button } from '@material-ui/core'
import CommentsAPI from '../../Services/CommentsAPI'

export default function CommentForm() {

    const [comment, setComment] = useState({})

    const handleSubmit = async (event) => {
        event.preventDefault();
        try {
            const data = CommentsAPI.create(JSON.stringify(comment))
            console.log(data)
        } catch (error) {
            console.log(error)
        }
    }

    const handleChange = (event) => {
        const {name, value} = event.currentTarget
        setComment({
            ...comment,
            [name]: value
        })
    }

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <TextField 
                    id="pseudo" 
                    label="Pseudo" 
                    type="text" 
                    onChange={handleChange}
                    name="pseudo"
                />
            </div>
            <div>
                <TextField
                    id="outlined-multiline-static"
                    label="Comment"
                    multiline
                    minRows={2}
                    onChange={handleChange}
                    name="content"
                />
            </div>
            <div>
                <Button variant="contained" color="primary" type="submit">
                    Send
                </Button>
            </div>
        </form>
    )
}

CommentsAPI.js 文件：

import { URL_COMMENTS } from '../config'
import axios from 'axios'

function create(comment) {
    return axios.post(URL_COMMENTS, comment)
}

const CommentsAPI = {
    create
}

export default CommentsAPI

我试图了解出了什么问题。非常感谢您的帮助！

看看我的服务器：

Answer 1

您没有向 API 发送任何内容。

CommentsAPI.create(YOUR COMMENT HERE)

const handleSubmit = async (event) => {
    event.preventDefault();
    try {
        // const data = CommentsAPI.create() // WRONG !
        // Create expects a comment, send something !
        const data = CommentsAPI.create('This is a test');
        // Or send the valu in your state
        // const data = CommentsAPI.create(comment.content);
    } catch (error) {
        console.log(error)
    }
}

此外，在您的服务器中，您将需要返回有用的错误消息。就像“嘿，没有消息，请在有效负载中发送消息”。这将帮助您更好地了解正在发生的事情。

Answer 2

对于面临同样问题的其他人，如果您要从具有列表的正文发送数据，请尝试将您的 get http 请求更改为 post。 希望这有帮助。

Answer 3

如果您收到 400 (https://en.wikipedia.org/wiki/List_of_HTTP_status_codes#4xx_client_errors)，则意味着服务器收到了您的请求，但内容无效。阅读 API 文档以确保发送正确的有效负载。

默认情况下，如果 Axios 接收到 2xx 以外的内容，则会抛出异常

如果你想要你的

console.log(data)

上班，别忘了添加

await

:

await console.log(data)

以便代码在尝试 console.log() 之前等待服务器的答案

Answer 4

你的问题就在这里...

JSON.stringify(comment)

这会将一个字符串传递给 Axios，它将解释为

text/plain

并将请求

content-type

标头设置为相同。

您的 API 很可能需要

application/json

或

application/x-www-form-urlencoded

请求正文并拒绝纯文本请求正文。

要发送前者，只需省略

JSON.stringify()

并让 Axios 处理序列化和内容类型检测

// don't forget to `await`
const { data } = await CommentsAPI.create(comment);

后者可以使用

URLSearchParams

来实现

const { data } = await CommentsAPI.create(new URLSearchParams(comment));

Answer 5

就我而言，我没有在 package.json 中提到（代理）

Answer 6

有时，当您克隆 git 存储库时，您需要在 React 中安装所有必需的依赖项，如果需要，则在后端安装所有必需的依赖项，但如果在从前端发出 axios 请求时生成错误，请尝试运行此命令

npm安装axios反应react-dom反应脚本web-vitals

Answer 7

AxiosError：请求失败，状态码 426 结算时（文件:///data/data/com.termux/files/usr/lib/node_modules/truecallerjs/node_modules/axios/lib/core/settle.js:19:12） 在Unzip.handleStreamEnd（文件:///data/data/com.termux/files/usr/lib/node_modules/truecallerjs/node_modules/axios/lib/adapters/http.js:572:11） 在 Unzip.emit （节点：事件：523：35） 在 endReadableNT（节点：内部/流/可读：1367：12） 在 process.processTicksAndRejections （节点：内部/进程/task_queues：82：21）