nuxt.js asyncData에서 form data 전달받는 방법

nuxt(vue ssr framework)에서 form으로 지정한 페이지에 form data를 post 메서드로 넘겨야될 경우가 생깁니다. 저는 아래와 같은 예시로 POST request를 전송하려고 합니다.

// pages/index.vue
<template>
  <div class="container">
    <form
      method="post"
      action="/status"
    >
      <input type="hidden" name="name" value="박경두" />
      <input type="hidden" name="address" value="서울특별시 강남구" />
      <button type="submit">submit</button>
    </form>
  </div>
</template>

<script>
export default {
}
</script>

<style></style>

하지만 index 페이지에서 status 페이지로 전달할 폼데이터를 만들어서 status 페이지로 전달하면 status 페이지의 req.body는 undefined를 전달할 것입니다.

// pages/status.vue
<template>
  <div>status</div>
</template>

<script>
export default {
  asyncData({ req }) {
    console.log(req.body)
  },
}
</script>

<style></style>

이때 우리가 추가적으로 해야될 작업이 있습니다. body-parser 라이브러리를 설치합니다.

body-parser란 Node.js의 POST 요청 데이터를 추출할 수 있도록 만들어 주는 미들 웨어입니다. body-parser를 사용하게 될 경우 req에 body 프로퍼티를 사용할 수 있습니다.

npm install body-parser
// or
yarn add body-parser

nuxt.config.js 파일에 서버미들웨어에 body-parser를 추가합니다.

// nuxt.config.js
import bodyParser from 'body-parser'

export default {
  ...,
  serverMiddleware: [
    bodyParser.urlencoded({ extended: true }),
  ],
  ...
}

body-parser를 통해 asyncData에서 req body 값을 받을 수 있다.

body-parser 라이브러리를 활용하면 깔끔하게 폼데이터를 전송받아서 처리할 수 있습니다.

만약 body가 json형식으로 깔끔하게 안떨어지고 [Object: null prototype]으로 파싱된다면 { extended: false }로 설정해서 그런거기 때문에 { extended: true }로 변경하고 사용하시면됩니다.