再現した状況
フロント、サーバー共にローカルでの開発環境。
フロントは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();
});