react-nativeでlocalhostのAPIアクセスがnetworkエラーになる場合

再現した状況

フロント、サーバー共にローカルでの開発環境。
フロントはreact-native。サーバーサイトはexpressで立てたAPIサーバー。

Webでreactを使うときのようにaxiosでAPIを叩いたが、network errorでデータの取得が不可。

原因

APIのドメインを「http://localhost」から「http://10.0.2.2:3001」にすると取得ができた。

具体的な理由は書いてないが以下と同じ現象。
https://stackoverflow.com/questions/49370747/network-error-with-axios-and-react-native

If you are trying to call localhost on android simulator created with AVD, replacing localhost with 10.0.2.2 solved the issue for me.

別の原因の場合

例えばcurlでもpostmanでもブラウザからでもいいが、それらreact-nativeの仮想端末に関係ない状況でも失敗するならcross-originを疑いましょう。

サーバー側で許容するようにコードを追加
以下はnode expressでの例

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});