redux 加载资源失败：服务器响应状态为 400 (Bad Request)答案

【问题标题】：redux Failed to load resource: the server responded with a status of 400 (Bad Request)redux 加载资源失败：服务器响应状态为 400 (Bad Request)
【发布时间】：2026-01-27 04:40:01
【问题描述】：

我的代码工作正常，但是当我尝试从后端获取数据时，我收到一个错误“400 bad request”，不知道出了什么问题。请弄清楚我的问题。

//API == http://localhost:8000/api/

index.js

import {API} from '../backend';
import axios from 'axios';

export const getdata = () => {
    return () => {
        axios.post(`${API}addtodo`)
        .then(res => {
            console.log(res)
        })
      
        .catch(err =>{
            console.log(err);
        })
    }
}

我在这里分享我执行添加操作的实际代码 Todoform.js

import React,{useState, useEffect} from 'react'
import '../App.css'
import {
    FormGroup,
    Input,
    Button,
    Form,
    InputGroup,
    InputGroupAddon
} from 'reactstrap';
import {v4} from 'uuid';
import 'bootstrap/dist/css/bootstrap.min.css';
import {getdata, AddTodo} from '../Auth'

//redux
import {connect, useDispatch} from 'react-redux'
import {addTodo} from '../Action/todo';

const TodoForm  = ({addTodo}) => {

    const [title,setTitle] = useState('')

    const dispatch = useDispatch();
 useEffect(() => {
        dispatch(getdata())
    }, []);


    return(
 <Form>
           <FormGroup>
               <InputGroup>
                    <Input 
                    type='text'
                    name='todo'
                    id='todo'
                    placeholder='Your next Todo'
                    value={title}
                    onChange={e => setTitle(e.target.value)}
                    />
                    <InputGroupAddon addonType='prepend'>
                        <Button color='primary' onClick={()=>{
                            if(title === ''){
                                return alert('please add a todo')
                            }
                            const todo = {
                                title,
                                id:v4(),
                            }
                    
                            addTodo(todo);
                    
                            setTitle('');
                        }}>
                        
                            ADD
                        </Button>
                    </InputGroupAddon>
               </InputGroup>
           </FormGroup>
       </Form>      
    )
}

const mapStateToProps = state => ({

}) 

const mapDispatchToProps = dispatch =>({
    addTodo : todo =>{
        dispatch(addTodo(todo))
    },
})


export default connect(mapStateToProps,mapDispatchToProps)(TodoForm)

$$$$$$$$$$$$$$$ 后端 $$$$$$$$$$$$$$$$$$$$$$

todo.js/路由器

router.post('/addtodo',addTodo);

todo.js/控制器

exports.addTodo = (req,res) =>{
  const todo = new Todo(req.body)
  todo.save((err,todo) => {
    if(err || !todo){
      return res.status(400).json({
          err : 'NOT able to store data in database'
      })
    }
    res.json(todo);
  })
}

【问题讨论】：

400 Bad Request 仅仅意味着您没有提供服务器所需的正确数据。
你能显示 ${API}addtodo 吗？
REACT_APP_BACKEND = localhost:8000/api export const API = process.env.REACT_APP_BACKEND; ***************后端********************* router.post('/addtodo',addTodo); export.addTodo = (req,res) =>{ const todo = new Todo(req.body) todo.save((err,todo) => { if(err || !todo){ return res.status(400) .json({ err : '不能在数据库中存储数据' }) } res.json(todo); }) }
你可以查看chrome的网络标签吗？ 400 是客户端错误
是的，上面写着“无法在数据库中存储数据”

标签： javascript reactjs react-redux react-hooks redux-thunk

【解决方案1】：

将第二个参数传递给axios.post 函数很重要。

我仍然对您的 getData 函数感到困惑，因为您使用 axios.post(`${API}addtodo`) 来获取数据。尝试改变这条路线。

如果您有意尝试在没有正文的情况下向addTodo 路由发出请求，请添加{} 作为第二个参数： axios.post(`${API}addTodo`, {})

【讨论】：