【ReactNative開発】Fetch APIでJSONをBodyにセットするとNetwork request failedエラーが発生する

こんばんは。引き続きReact Nativeのトラブルシューティングです。参ります。

前提

• React Native
• Expo
• Type Script
• Android エミュレータでデバッグ

問題

今、React NativeでJSONをBodyにセットしてAPIをコールする処理を作っているのですが、この機能をAndroidエミュレータでテストすると、以下のエラーが発生しました。

Network request failed

コードはこちら。

bodyData = JSON.stringify(jsonData)

return fetch (url, {
        method: 'POST',
        headers:{
 　　　　　　　　　　　　　　　　　　　　・・・・
        },
        body:bodyData
    })
・・・・

原因と解決方法

原因は、bodyDataがJSONであることを明示するためのHTTPヘッダの設定（content-type）が不足していたことでした。

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

具体的には、以下の通りに設定する必要がありました。

bodyData = JSON.stringify(jsonData)

return fetch (url, {
        method: 'POST',
        headers:{
 　　　　　　　　　　　　　　　　　　　　・・・・
　　　　　　　　　　　　　　　　　　　　　　'Content-Type': 'application/json' ★       },
        body:bodyData
    })
・・・・

Content-Typeの説明はこちら。

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Type

Content-Type 表現ヘッダーは、リソースのメディア種別を示すために使用します。

レスポンスにおいては、 Content-Type ヘッダーはクライアントに返されたコンテンツの実際の種類を伝えます。ブラウザーは MIME を推定し、このヘッダーの値に従わないこともあります。 X-Content-Type-Options を nosniff に設定すると、この動作を防ぐことができます。

リクエストにおいては (POST または PUT などで)、クライアントがサーバーに実際に送ったデータの種類を伝えます。

Mozillaのページより

これを明示的に指定しないといけないんですね・・。勉強になりました。

おしまい。（トラブルシューティングはまだまだ続きます笑）

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。