리액트에서 노드로 api 호출할때 질문이요....

React
1

안녕하세여. 리액트에서 노드서버로 api를 호출하려고 하는데 request에 parameter를 넣어서 보내려고 합니다.
그런데 파라미터를 넣어도 노드 서버쪽에서 계속 데이터가 안나오는데 다른 예제들을 찾아봐도 원하는 내용이 안나오네여…
이건 리액트에서 호출하는 부분이고
callApi=async()=>{
const response = await fetch(’/api/customers’,{
body:JSON.stringify({id:1})
});
const body = await response.json();
return body;

}

이건 노드 서버쪽에서 받는부분입니다.
app.get(’/api/customers’,(req,res)=>{
let sql = “select * from customer where id=?”;
const params = JSON.parse(req.body);
connection.query(
sql,params,
(err,rows,fields)=>{
res.send(rows);
if(err){
console.log("err : "+err);
}
}
)
});

어느부분을 고쳐야 서버의 파라미터에 값이 들어갈까여…?

2

node에서 요청을 수신하는 부분이 app.get으로 처리하고 있네요? GET 방식은 HTTP request Body를 처리할 수 없습니다. POST 방식으로 코드를 변경하거나 GET 방식을 사용하시려면 Request parameter로 처리하도록 변경해보세요.

그리고 fetch로도 HTTP 요청을 처리하는 데 문제가 없지만 axios가 더 편리하지 않을까요?

3

app.get(’/api/customers/:id’,function(req,res){
console.log(req.params.id)
…
});

요청은 /api/customers/1001 과 같이 전달하시면 됩니다.

4

답변 감사합니다.ㅎ axios라는 걸 이용해서 통신을 하려고 하는데 서버에서 데이터를 주고 받는것 까지 잘 되는것을 확인하였습니다. 그런데 이제 받아온 데이터를 가지고 map을 이용해서 뿌려줘야 하는데
“this.state.customer.map is not a function” 이런 에러가 떳습니다. 클라이언트에서 데이터를 가져오기 위해 호출하는 부분은
componentDidMount(){
this.timer = setInterval(this.progress,20);
this.callApi().then(res=>this.setState({customer:res}))
.catch(err=>console.log(err));
}

callApi=async()=>{
try {
return await axios.get(’/api/customers/’+1);
} catch (error) {
console.error(error);
}
}

이렇게 작성되어 있습니다. res를 JSON.stringify로 해봐도 저런 에러가 나는데 어떻게 해결하면 될지 혹시 알 수 있을까여…?

–res가 아니라 res.data를 넣어줬어야 했네요ㅎㅎ 답변 감사합니다!!