1

I'm trying to develop a react native mobile app. I'm at the begin of the project and I'm already stuck.

I created in VS 2019 a new Api Web Application. I'm trying to call WeatherForecastController (created from visual studio).

I edited the startup.cs in order to avoid CORS issue.

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        //services.AddCors();
        services.AddControllers();
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseCors(builder =>
        {
            builder.AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod();
        });

        app.UseHttpsRedirection();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
}

I installed axios in my React Native Projects.

And this is how I call my api:

componentDidMount() {
axios.get('http://localhost:55622/weatherforecast').then(function (response) {
  console.log("POST RESPONSE: " + JSON.stringify(response));
});

}

The error I receive is:

[Unhandled promise rejection: Error: Network Error]
- node_modules\axios\lib\core\createError.js:15:17 in createError
- node_modules\axios\lib\adapters\xhr.js:80:22 in handleError
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:574:29 in setReadyState
- node_modules\react-native\Libraries\Network\XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

I tried in both http and https ways.

I also tried to call some public apis like 'https://facebook.github.io/react-native/movies.json' and it works correctly.

Call the same url from postman, it works correctly.

enter image description here

I'm using .Net Core 3.0 and here are the dependencies of my react native project:

  "dependencies": {
"@expo/samples": "~36.0.0",
"@expo/vector-icons": "~10.0.0",
"@react-navigation/web": "~1.0.0-alpha.9",
"axios": "^0.19.1",
"expo": "~36.0.0",
"expo-asset": "~8.0.0",
"expo-constants": "~8.0.0",
"expo-font": "~8.0.0",
"expo-image-picker": "~8.0.0",
"expo-permissions": "~8.0.0",
"expo-web-browser": "~8.0.0",
"galio-framework": "^0.6.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "~1.5.0",
"react-native-maps": "0.26.1",
"react-native-reanimated": "~1.4.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-signalr": "^1.0.6",
"react-native-web": "~0.11.7",
"react-navigation": "~4.0.10",
"react-navigation-stack": "~1.10.3",
"react-navigation-tabs": "~2.6.2",
"react-redux": "^7.1.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"

}

Could you please help me to find a way to solve this problem? Thank you in advance.

1
  • Could you share your launchSettings.json?Did you try applicationUrl? Commented Jan 17, 2020 at 1:38

2 Answers 2

3

You have to publish your api to IIS. You can't test it with http://localhost url. First test your api with PostMan or app like that and publish it to your local IIS. Assign ip to it from IIS. Then call it from your app like 'http://100.293.12.33'

Sign up to request clarification or add additional context in comments.

4 Comments

Thank you. This solved my problem. But I can't understand why. When I develop web applications I'm able to host both the client side and the server side. Why I can't do that with react native?
You do not need to use IIS. Right click on the properties of the project and goto the debug tab on the left. Then modify the APP URL to somthing like 192.168.1.2:80 then run it up as normal.
This is better.
@MichaelCeber I have tried the same way you recommended but i still get the network request failed: TypeError: Network request failed
0

Make the API run in http (Not in https).

replace the localhost by the IP (10.0.2.2)

This is the URL look like ('http://10.0.2.2:5034/api/...')

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.