Connection refused when attempting http requests to local web api (ionic android application)

Question

I built an ionic/angular web app via ionic build, then created the android project with capacitor via "ionic capacitor run android -l --external". I'm trying to make an http post request to a local web api. Api's IP is 127.0.0.1:43308, while the android project is running at http://192.168.1.6:8100. I tried many solutions online and all led me back to the same error

net::ERR_CONNECTION_REFUSED

Anyone got ideas? the project has no issues when ran through a web browser, only gives me such error when it's ran as a native application

Capacitor.config.json:

{
  "appId": "com.reservation.app",
  "appName": "reservation-app",
  "webDir": "www",
  "npmClient": "npm",
  "server": {
    "url": "http://192.168.1.6:8100",
    "cleartext": true,
    "allowNavigation":[
      "localhost:8100/*"
    ]
  }
}

Config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <access origin="*" />
  <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:networkSecurityConfig="@xml/network_security_config" />
    <application android:usesCleartextTraffic="true" />
  </edit-config>
  <preference name="ScrollEnabled" value="false" />
  <preference name="android-minSdkVersion" value="19" />
  <preference name="BackupWebStorage" value="none" />
  <preference name="SplashMaintainAspectRatio" value="true" />
  <preference name="FadeSplashScreenDuration" value="300" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
  <preference name="SplashScreen" value="screen" />
  <preference name="SplashScreenDelay" value="3000" />
  <feature name="CordovaHttpPlugin">
    <param name="android-package" value="com.silkimen.cordovahttp.CordovaHttpPlugin"/>
  </feature>

  <feature name="File">
    <param name="android-package" value="org.apache.cordova.file.FileUtils"/>
    <param name="onload" value="true"/>
  </feature>

  <feature name="Whitelist">
    <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin"/>
    <param name="onload" value="true"/>
  </feature>

</widget>

EDIT: Web API's CORs policy:

public void ConfigureServices(IServiceCollection services)
{
      services.AddCors(options =>
      {
         options.AddPolicy(name: AllowSpecificOrigins,
                 builder =>
                 {
                     builder.WithOrigins( "http://localhost:8100", "http://192.168.1.6:8100")
                     .AllowAnyMethod()
                     .AllowAnyHeader()
                     .AllowCredentials();
                  });
         });
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseCors(AllowSpecificOrigins);
}

Check this: https://stackoverflow.com/a/60907425/5909026 – Najam Us Saqib Mar 10 '21 at 04:18 — Najam Us Saqib, Mar 10 '21 at 04:18
@NajamUsSaqib tried removing server url, did not work. – SnippyC0d3r Mar 10 '21 at 10:27 — SnippyC0d3r, Mar 10 '21 at 10:27

score 0 · Answer 1 · answered Mar 10 '21 at 03:46

Looks like a CORS issue.

Enable CORS for all request methods and from localhost ports 3000 ( http://192.168.1.6:8100 in your case) and 1056 (default for the Webpack server and VS.NET respectively) As we require credentials sent over, we can't use 'Access-Control-Allow-Origin: *' and need to explicitly list available websites. See brief description here or a verbose one here

To enable CORS for your entire application the line below must precede any defined endpoints in your app that you want to support cross-origin requests (ex. before any call to UseMvc).

app.UseCors(builder =>
                builder.WithOrigins(["http://192.168.1.6:8100","Other Origins that need to call the backend here"])
                    .WithExposedHeaders(HeaderNames.ContentDisposition) // Expose the file name of downloaded files
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials()
            );

Web api's cors policy is as follows: `services.AddCors(options => { options.AddPolicy(name: AllowSpecificOrigins, builder => { builder.WithOrigins( "http://localhost:8100", "http://192.168.1.6:8100") .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials(); }); }); app.UseCors(AllowSpecificOrigins); ` @alvin-saldanha — SnippyC0d3r, Mar 10 '21 at 10:28
Also attempted to replace my cors policy with your suggested configuration, did not work. — SnippyC0d3r, Mar 10 '21 at 10:38

score 0 · Answer 2 · answered Mar 10 '21 at 15:07

Figured it out, web api IP address should be 127.0.0.1:PORT, and android's api reference IP should be 10.0.2.2:PORT (points to the pc's local server).

https://learn.microsoft.com/en-us/xamarin/cross-platform/deploy-test/connect-to-local-web-services#create-a-development-certificate

Can't connect to api endpoint from mobile app

Connection refused when attempting http requests to local web api (ionic android application)

2 Answers2