![](/img/trans.png)
[英]Laravel 7 - Failed to load resource: the server responded with a status of 400 (Bad Request)
[英]redux Failed to load resource: the server responded with a status of 400 (Bad Request)
我的代碼工作正常,但是當我嘗試從后端獲取數據時,我收到一個錯誤“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);
})
}
將第二個參數傳遞給axios.post
function 很重要。
我仍然對您的getData
function 感到困惑,因為您正在使用axios.post(`${API}addtodo`)
來獲取數據。 嘗試更改此路線。
如果您有意嘗試在沒有正文的情況下請求addTodo
路由,請添加{}
作為第二個參數: axios.post(`${API}addTodo`, {})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.