【解決した】JSのfetchでPOSTのパラメーターが送信できない

投稿日：2018年11月10日

こんにちは、mabuiです。
プログラミングしていると予期しないところでハマって時間を浪費することあるあるですよね。
今自分もJavaScriptのfetchメソッドでPOSTリクエストを出す際にパラメーターを送信できなくて絶賛ハマり中です、、、

POSTを受け取るapi

Pythonのflaskでapiを作っています。

@app.route("/hoge", methods=['POST'])
def hoge():
    print(request)
    print(request.form)
    #page = request.form['page']
    return 'hogehoge'

@app.route("/hoge", methods=['POST'])

def hoge():

print(request)

print(request.form)

#page = request.form['page']

return 'hogehoge'

パラメーターが渡ればrequest.formに値が入ってくるはずですが、、、

Content-type : application/jsonで送信

JS側でfetchを使ってリクエストしてみます。

const res = await fetch('http://localhost:5000/hoge', {
            method : 'POST',
            headers : { "Content-type" : "application/json; charset=utf-8" },
            body : JSON.stringify({page: 1})
        }).catch(error => {
            console.log(error.message)
        })

const res = await fetch('http://localhost:5000/hoge', {

method : 'POST',

headers : { "Content-type" : "application/json; charset=utf-8" },

body : JSON.stringify({page: 1})

}).catch(error => {

console.log(error.message)

})

Python側のprint(request.form)の出力は、
ImmutableMultiDict([])
で、辞書型の中に空の配列が入っていますね、ううむ、、、

書きながら調べてたら

requestのプロパティにrequest.jsonというものがあることを発見！
これをprint(request.json)してみると、、

{'page': 1}
パラメーターが渡っていました！！！
なるほど〜json形式で渡ってきたパラメーターはこうやって受け取るんだな〜〜！
本当に今リアルタイムでブログ書いてたら解決しました！
まさにラバーダッキング的な解決方法。ラバーダッキングとは1人でもやもや悩んでいる時に同僚やおもちゃのアヒルに話していると、頭の中で問題が整理され、解決法が導かれるというテクニックで、心理負荷も軽減できておすすめです。
でもこれ前に同じような問題で悩んだ気がするな、、、

ちなみにPythonではdirメソッドを使うと、オブジェクトが保持しているプロパティやメソッドを一覧で確認できます。

for method in dir(request):
    print(method)

for method in dir(request):

print(method)

こんな感じでダーっと出てきます。

args
authorization
base_url
blueprint
cache_control
charset
...

args

authorization

base_url

blueprint

cache_control

charset

...

動的言語って便利ですけど、すぐにオブジェクトの持つプロパティやメソッドを確認できないのが手間だな〜と感じます。

凄く茶番な記事になってしまいすいません！
問題も解決したので、心置きなく飲み行ってきます〜〜！