[Next.js axios API] Request path contains unescaped characters

エラーメッセージ

TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters

問題のあるコード

  const title = "xx";
  const smallCategory = "あああ"
  const material_url = `materials/get?title=${title}&smallCategory=${smallCategory}`
  const axios = axiosBase.create({
    baseURL: `${process.env.URL_ORIGIN_NAME}/api`,
    headers: {
      'Content-Type': 'application/json',
    },
    responseType: 'json'
  });
  const res = await axios.get(material_url)

axios でAPIを叩こうとすると、エラーになる。

エラー原因

どうも、URLパラメータに日本語が入っているとエラーになる。

日本語の他にも、記号や全角文字が入っていてもエラーになる。

解決策

  const title = "xx";
  const smallCategory = "あああ"
  const material_url = encodeURI(`materials/get?title=${title}&smallCategory=${smallCategory}`)
  const axios = axiosBase.create({
    baseURL: `${process.env.URL_ORIGIN_NAME}/api`,
    headers: {
      'Content-Type': 'application/json',
    },
    responseType: 'json'
  });
  const res = await axios.get(material_url)

URLを encodeURI を使って事前にエンコードする。それにより、日本語や記号がパラメータに含まれていたとしてもエラーにならない。

コメント

タイトルとURLをコピーしました