クエリパラメータに日本語を渡したら困った話

概要

• Cloudflare Pagesの Functions機能をつかって検索結果を返すAPIを作成していた
• /api/search?q=検索キーワード　のようなURLにリクエストを投げたらmicroCMSのAPIをたたいた検索結果が返ってくるようにしていた
• 検索キーワードに日本語を含む文字列を指定した

日本語を含むというところがポイントですが、それ以前に文字列をそのまま連結してURLを作っていたという問題点もありました。

このようなシチュエーションで、APIをたたいた時、

• wrangler pages devで起動しているローカル環境ではほしいデータが返ってくる
• 本番環境では空のデータが返ってくる

となって少し詰まったので記事として残します。

過去同じようなことがあった気がしたので試しに英単語で検索したら本番でもローカルでも動いていたので、今回はエンコードか…とすぐ気づくことができました。

解決方法

検索キーワードの部分に渡す文字列をURLSearchParamsで処理してから渡すだけです。
そもそもそのまま文字列連結して渡すのは危なかったですね。

ダメな例

const q = '日本語のキーワード' // Inputなどから得た検索キーワード
fetch(`/api/search?q=${q}`)

OKな例

const q = '日本語のキーワード' // Inputなどから得た検索キーワード
const params = new URLSearchParams()
params.append('q', q)
fetch(`/api/search?${params.toString()}`)

気を付けましょう。

参考

• URLSearchParams
• microCMSのqパラメーター