How to contact flask-restful api from react native app?

Question

i am new to backend dev. I try to developp a flask restful api. I followed the documentation and made the suggested minimal api, that is just returning a jsonified dict. With postman, curl and in the browser, no problem, the api is running and responds to my requests.

From my react native app however, i always get a Netwrok Error.

I tried lots of things:
- multiple IP addresses for the flask serveur
- differents ways to use axios
- different os : win10, ubuntu
- different endpoints : /, /api, /test
- different ways of writing the api (flask-restful class, flask app functions ...)
- manips from web documentations : dev mode of my device, chrome dev tools (port forwarding)
- i asked a react native developper to check my client-side code, nothing wrong according to him,

precisions :
- python code runs under a conda virtual env
- appli runs under node js and expo
- container folders of my app and my api are at the same level
- the flask server does not respond 404 or whatever, it does not respond at all, the error returned in react native is a network error
- depending on url, the network errors occurs immediately or after a 2 minutes delay
- flask shows requests and status when called by postman, curl, chrome, but does not react when i press my buttons from the react native app

Here is (one of) my python code:

from flask import (Flask, jsonify)
# from flask_restful import Resource, Api
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

@app.route("/api", methods=["GET"])
def get():
    return jsonify(hello='bouh !')

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=True)

and here is the clientside code:

import React, {Component} from 'react';
import { View, Button } from 'react-native';
import axios from 'axios'; 

import { sharedStyles } from '../../SHARED/_shared';

var url = "http://192.168.1.16:5000/api";

export default class PrevCommune extends Component {
    constructor(props){
        super(props);
        this.navigation=this.props.navigation;
    };

    getAxios=()=>{
        axios.get(`${url}`).then((response)=>{
            console.log("succes axios :",response);
        }).catch((error)=>{
            console.log("fail axios :", error);
        });
    };

    getFetch=()=>{
        fetch(url).then((response)=>{
            console.log("succes fetch :",response)
        }).catch((error)=>{
            console.log("fail fetch :",error)
        })
    }

    render(){
        return (
            <View style={sharedStyles.mainContainer}>
                <Button onPress={()=>this.getAxios()} title={"get axios"}></Button>

                <Button onPress={()=>this.getFetch()} title={"get fetch"}></Button>
            </View>
        );
    };
};

And the lines returned by requests:

fail axios : [Error: Network Error]
fail fetch : [TypeError: Network request failed]

I saw lots of tutos, videos, articles on flask api but i didn't find where i am wrong. Please tell me if you have any ideas ! I think both client and server codes are ok, the problem seems to be that my requests are blocked by something.

Answer 1

Solved : the probleme was my firewall ... thank you ricardo for the CORS doc =)