ExpressでPOSTを受け取るとき

JavaScriptで何らかのリクエストを送る、受け取るときって多いですが、
送信側 fetch APIでPOST
受信側 Express(Node.js)
のときに、bodyが空っぽになっちゃって困った。
ってなったときのメモです。

fetch APIでリクエストを送信

おおむねMDN web docs (fetch 概説)で紹介されているものと同じです。

fetch('リクエスト先URL', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    user: 'user',
    data: 'data'
  })
})
.then(response => {
  if (response.status === 200) {
    return response.json()
  } else {
    console.warn('Something went wrong on api server!');
  }
})
.then(json => {
  return callback(json)
})
.catch(error => {
  console.error(error);
})

ExpressでPOSTを受け取る

準備

ExpressでPOSTを受信するのはこんな感じです。

const express = require('express')
const app = express()
app.listen(3000)

app.post('/request', (req, res) => {
  console.log(req.body)
  res.send('OK')
})

ExpressでPOSTを受け取る

さらにPOSTパラメータも受け取るにはbody-parserを使います。
npmで入れてから、以下を追記します。

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())

ここで、この一文を書かないと受信したbodyがからっぽになります。

app.use(bodyParser.json())

HTMLのformなどから送られるデータはurlencode形式ですが、上記したfetchで送られるPOSTデータはjson形式で送られるので、urlencodeとは別にjsonも初期化が必要です。

最終的なコード

const express = require('express')
const app = express()

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())

app.listen(3000)

app.post('/request', (req, res) => {
  console.log(req.body)
  res.send('OK')
})