【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に不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。

この記事を気に入っていただけたらシェアをお願いします!

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。