express를 사용하여 api공부를 위해 실습을 하고 있는데 client에서 요청한 request.body내용이 Undefined로 나오는 이슈가 발생했다.

 

 아래처럼 POST방식으로 json형태의 data를 전송한 후 express.js 파일에서 req.body형태로 데이터를 읽어오려했으나 에러가 발생했다.

//signup.ejs

$.ajax({
    url : "http://localhost:3000/signup",
    type : "POST",
    dataType: 'json',
    data : {
        'username' : username,
        'email' : email,
        'password' : password,
        'access_token' : access_token,
        'refresh_token' : refresh_token,
        'useseqnum' : useseqnum
    },
    success : function(res){
        if(res == '1'){
            alert('회원가입이 완료되었습니다.');
        }else{
            alert('실패!');
        }
    }
});

//express.js 

app.post("/signup", function(req, res){
    console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
    console.log(req.body);
    console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
    res.json(1);   
});

Undefined..

express에서 body를 parse하기 위해서는 다음과 같이 코드를 추가한다.


  1. body-parser 모듈을 추가한다.

     npm install body-parser
    
     var bodyParser = require('body-parser')
     app.use(bodyParser.json())

    body-parser라는 node.js모듈을 추가하면 되지만 Express v4.16.0 기준으로 express.js에서 자체 제공하기 때문에 따로 import 할 필요가 없다.

  2. express.json()을 추가한다.

    위에서 언급한 내용과 같이 express.js 자체에 built-in 되어있기 때문에 아래와 같이 코드를 추가해주면 된다.

     var express = require('express')
     var app = express();
     app.use(express.json())
     app.post('/profile', function(req, res) => {
       console.log(req.body)
     })
  3. express.urlencoded();

    위 2번 까지 작업 후 문제가 해결될 줄 알았으나 undefined문제는 해결되었으나 데이터가 나오지 않고 '{ }' 와 같이 빈 브라켓만 출력되는 이슈가 발생했다.

    검색해보니 urlencoded 메서드를 추가해야 한다는 글을 읽게 되었고 아래와 같이 추가하니 데이터가 정상적으로 나오는 것을 확인할 수 있었다.

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

    URL-encoded는 주소 형식으로 데이터를 보내는 방식을 말한다. 위 메서드에는 extended라는 옵션에 따라 다음과 같이 설명된다.

    • {extended : false} → querystring 모듈을 사용하여 쿼리스트링 해석

    • {extended : true} → qs 모듈을 사용하여 쿼리스트링 해석

      qs모듈은 npm패키지이며 querystring 모듈보다 기능이 조금 더 많은 모듈이다.


위와 같이 설정 후 req.body값이 정상적으로 출력되는 것을 확인할 수 있었다.

 

 

 

 

+ Recent posts