client에서 server로 body에 데이터 넣어 보내기

 

client쪽에서 server로 데이터를 보내기 위해서 post 요청의 2번째 인자에 데이터를 넣어줍니다.

 

 

client 코드

 

  const [text, setText] = useState("");

    useEffect(() => {

      let body = {

        text: "클라에서 보낸 데이터",

      };

      axios

        .post("/api/test", body)

        .then((response) => {

          //요청 성공 후

          setText(response.data.text);

        })

        .catch((error) => {

          console.log(error);

        });

    }, []);

 

 

 

server 코드

 

  app.post("/api/test", (req, res) => {

    console.log(req.body);

    res.status(200).json({ success: true, text: "server 응답 출력" });

  });

 

 

 

 

client에서 보낸 요청(req)를 확인하려고 콘솔을 찍어보니..

개발도구창에는 오류는 없는데

server 터미널에 log가  undefined로 뜨고 있는 현상 발생 ㅠ

 

몇번을 해봐도 undefined....

 

 

검색..

express 문서에 따르면 미들웨어 없이req.body 에 접근하는 경우에는 기본으로undefined 가 설정되어 있으므로 bodyParser, multer와 같은 미들웨어를 사용하여 요청 데이터 값에 접근해야 한다는 안내를 찾을 수 있습니다.

 

API 요청에서 받은 body 값을 파싱하는 역할을 수행하는 것이 bodyParser 라는 미들웨어이다.

 

추가 보안)

- bodyParser가 client에서 들어오는 요청을 가로채서 리퀘스트 객체의 body라는 객체를 추가시켜주는 역할을 한다.

Express 4.x 이후 내장 모듈 지원을 한다고 합니다.(body-parser를 따로 설치X)

 

 

 

이코드를 추가해보자!

app.use(express.json()); 
app.use(express.urlencoded( {extended : false } ));

 

 

 

적용 후 client에서 server쪽으로 req(body) 데이터가 log에 찍히는 것을 볼수 있습니다.

 

참조: https://velog.io/@yejinh/express-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4-bodyParser-%EB%AA%A8%EB%93%88

express 미들웨어 body-parser 모듈

 

참조 : https://velog.io/@bigbrothershin/Axios-delete-%EC%9A%94%EC%B2%AD-%EC%8B%9C-body%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%84%A3%EB%8A%94-%EB%B2%95

Axios - delete 요청 시 body에 데이터 넣는 법