高木のブログ

【Hono】POST リクエストで JSON データを受け取る

2022/08/01

Cloudflare Workers 向けフレームワーク、Hono を触っていて、POST リクエストで JSON データを受け取るところで詰まったのでメモ

cURL で以下のように JSON データを送った時、c.req.parseBody() で受け取ることができる

$ curl -X POST localhost:8787 -H 'Content-Type: application/json' -d '{"id":"takagi","password":"thisispassword"}'
import { Hono } from 'hono'

const app = new Hono()

app.post('/', async (c) => {
  const { id, password } = await c.req.parseBody()

  console.log({ id, password })
  // { id: 'takagi', password: 'thisispassword' }

  return c.text('Hello, Hono!')
})

export default app

上のやり方はドキュメントにも書いてあるやり方で

Content-Type を指定しない場合

$ curl -X POST localhost:8787 -d '{"id":"takagi","password":"thisispassword"}'

Content-Type を指定しないと
{ id: undefined, password: undefined } になってしまった

c.req.parseBody() の結果を確認してみると、丸ごとキーに格納されていた

app.post('/', async (c) => {
  const body = await c.req.parseBody()

  console.log(body)
  // { '{"id":"takagi","password":"thisispassword"}': '' }

  return c.text('Hello, Hono!')
})

c.req.json() で受け取ることができる

app.post('/', async (c) => {
  const { id, password } = await c.req.json()

  console.log({ id, password })
  // { id: 'takagi', password: 'thisispassword' }

  return c.text('Hello, Hono!')
})

ytkg

Written by ytkg, Twitter, GitHub