- 此问题在此处已有答案**:
POST Request with Fetch API?(7个答案)
3天前关闭。
我正在编写从前端(react)获取输入并将其发送到后端(nodejs)的简单代码。
但是它在req.body的后端不能很好地工作。
我输入的名称"地点"和发送使用的方法后。
如果我打印req.body,则只打印空字符串和对象类型.
我尝试使用body-parser和cors来寻找解决方案,但是没有任何改变。
这是我的nodejs代码和react代码的一部分!!你能告诉我在哪里修复吗?谢谢
const express = require('express') ;
const app = express();
var bodyParser = require('body-parser');
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
const cors= require('cors') ;
app.use(cors()) ;
const placeList = [
{
text: '연수',
},
];
app.get('/', function(req,res){
res.send('hello world');
});
app.get('/api/', (req, res )=>{
//리스트를 읽어서 보여주는 경우 response로 동작시키기
res.json(placeList) ;
}) ;
app.post('/api/', (req,res)=>{
//백엔드에서 프론트의 정보를 받는 경우 request로 동작시키기
const place =req.body ;
const newplace =place.place;
console.log(typeof(place)) ; //object
console.log(req.body) ; //{}
console.log(place) ; //{}
console.log(newplace) ; //undefined
console.log(place.place) ; //undefined
return res.send(`success `)
});
app.listen(8080, ()=>{
console.log('server start');
});
React代码
function App() {
const[placelist , setPlaceList ]= useState(null) ;
useEffect(()=>{
//useeffect로 언제 데이터 불러올 지 결정하기
fetch('http://localhost:8080/api')
.then((response)=>response.json())
.then((data)=>setPlaceList(data));
}, []) ;
const onSubmitHandler =(e)=>{
e.preventDefault();
const place =e.target.place.value ;
console.log(place) ;
console.log(typeof(place)) ;
fetch('http://localhost:8080/api/',{
method:'POST' ,
body: JSON.stringify({
place}),
});
};
return (
<div className="App">
<h1>hi</h1>
<form onSubmit={onSubmitHandler}>
<input name='place'/>
<input type='submit' value ='추가'/>
</form>
{placelist?.map((place)=>(
<div key = {place}>
<div>{place.text}</div>
</div>
))}
</div>
);
}
2条答案
按热度按时间x8goxv8g1#
检查您的express版本,如果它小于4.12 -您需要使用bodyParser,如果大于4.12,则使用express.json()并将
headers: { 'Content-Type': 'application/json' },
添加到您的fetchoxcyiej72#
向API传递数据时,它应该采用如下对象形式
字符串化({“位置”:位置});
因为在服务器端,数据被解析为JSON对象,所以传递的数据必须是JSON对象。