NodeJS 我如何修复节点js POST错误与空字符串[重复]

laximzn5  于 2023-01-01  发布在  Node.js
关注(0)|答案(2)|浏览(162)
    • 此问题在此处已有答案**:

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

x8goxv8g1#

检查您的express版本,如果它小于4.12 -您需要使用bodyParser,如果大于4.12,则使用express.json()并将headers: { 'Content-Type': 'application/json' },添加到您的fetch

oxcyiej7

oxcyiej72#

向API传递数据时,它应该采用如下对象形式
字符串化({“位置”:位置});
因为在服务器端,数据被解析为JSON对象,所以传递的数据必须是JSON对象。

相关问题