AxiosError：请求失败，状态代码为400(在Reaction JS中)

jobtbby3 于 2022-10-21 发布在 iOS

关注(0)|答案(4)|浏览(697)

我正试着用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

我在试着了解哪里出了问题。非常感谢你的帮助！
看看我的服务器：
Collection type
Permission with POST api url

axios

来源：https://stackoverflow.com/questions/72307388/axioserror-request-failed-with-status-code-400-in-react-js

4条答案

按热度按时间

bcs8qyzn1#

你的问题在这里。

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

赞(0）回复(0）举报 2022-10-21

fnvucqvd2#

您没有向您的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)
    }
}

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

赞(0）回复(0）举报 2022-10-21

uidvcgyl3#

对于面临相同问题的其他任何人，如果您正在从具有列表的Body发送数据，请尝试将GET http请求更改为POST。希望这能帮上忙。

赞(0）回复(0）举报 2022-10-21

holgip5t4#

如果您收到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)

因此，代码在尝试sole.log()之前等待服务器的回答

赞(0）回复(0）举报 2022-10-21

我来回答

AxiosError：请求失败，状态代码为400(在Reaction JS中)

4条答案

相关问题

热门标签

最新问答