🙅♂️
JavaScriptからGETリクエスト送信時にbodyを持たせられない件について
GET APIを作る時の教訓
- GETリクエストに情報が必要な時は、パスパラメータか、クエリパラメータで指定する
- GETリクエストに情報が必要な時は、GET以外のmethodを検討する
まずいAPIを作ってしまった。
それは、GETリクエストにデータを必要とするものだ。postmanでしっかりテストも行った。レスポンスは200が返って来たし、求めているデータも返ってきた。
JavaScriptからこれをリクエストした時に問題が発生した。
発生した事象
フレームワークにはReactを使っていた。APIのGETリクエストを送信する処理は、SWRを使う予定だった。公式ドキュメントを読んでデータの持たせ方を探してみたが、見当たらない。怪しい匂いが少ししていたが、そこまで重要に捉えていなかった。
以下のようなコードでリクエストしたら500が返ってきた。
import axios from 'axios'
import useSWR from 'swr'
const fetcher = ({ url, config }) => axios(url, config).then((res) => res.data)
export const fetchData = (id) => {
const config = {
method: 'get',
...,
data: JSON.stringify({ id: id })
}
const { data, error } = useSWR([`/data` args], fetcher)
return { raasId: data, raasIdError: error }
}
リクエスト自体は飛んでいるようだが、リクエスト情報にdataが送れれているような形跡はない。
怪しいなと感じたいて予感が的中した。
失敗するGETリクエスト
axiosの場合
axiosのドキュメントを参照してみると確かに以下の通り表記されているのがわかる[1]
data is the data to be sent as the request body Only applicable for request methods 'PUT', 'POST', 'DELETE', and 'PATCH'
import axios from 'axios'
const config = {
method: 'get',
url: 'https://api-request-example/api/fetch-data',
headers: {
'Content-Type': 'application/json',
'token': 'hogefugopiyo'
},
data: JSON.stringify({
'sample': 'hoge'
})
}
axios(config)
.then(...)
.catch(...)
fetch()の場合
fetchを利用した場合は、以下のようなエラーメッセージがブラウザコンソールに明示的に表示される [2]
Request with GET method cannot have body
const requestOptions = {
method: 'GET',
url: 'https://example.com/api/data',
headers: {
'Content-Type': 'application/json',
'token': 'hogefugopiyo'
},
data: JSON.stringify({
'sample': 'hoge'
})
}
fetch('https://example.com/api/data', requestOptions)
.then(...)
.catch(...)
たしかに、fetch() MDNドキュメントに明記されているようだ [3]
body - メソッドが GET や HEAD の場合は使用できないので注意してください。
参考
Discussion