Axioserror：状态代码400的请求失败（在React JS中）

Question

我正在尝试使用Axios发表评论。 When I submit my datas entered in the form, I see this error in the console :

AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…},请求：xmlhttprequest，＆nbsp;…}

这是我的代码：

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>
    )
}

commentapi.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发送任何内容。 commentapi.create（您在此处评论）

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请求发布。
希望这会有所帮助。

Answer 3

如果您收到400（），这意味着该确定收到了您的请求，但内容无效。阅读API的文档，以确保您发送正确的有效载荷。

默认情况下，如果Axios收到了2xx以外的其他东西，它将引发异常

，如果您要

console.log(data)

工作，请不要忘记添加等待：

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

就我而言，我没有在包装中提及（代理）。

Answer 6

有时，当您克隆git存储库时，则需要在React和后端中安装所有所需的依赖项，如果需要，但是如果在Frontend发出Axios请求时会产生错误，请尝试Byrunning此命令

NPM安装Axioio