React + Capacitor Android app cannot reach local Node backend over HTTP, but browser can

Question

I have a React web app wrapped with Capacitor and running on Android. My backend is a Node.js server running on my local machine with IP 10.0.0.193:3000.

When I open the backend in my phone’s browser, it works fine.
When the app (installed via the Play Store internal testing) makes an API request to http://10.0.0.193:3000, the request does not hit the backend.

Here's what I have tried so far:

Added android:usesCleartextTraffic="true" in AndroidManifest.xml:

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme"
    android:usesCleartextTraffic="true">

Confirmed that the API URL in the app is using the server IP (10.0.0.193:3000) and not localhost.
Tested that the server is reachable from the phone browser on the same network.

How can I configure a React + Capacitor Android app so that it can make HTTP requests to a backend running on my local machine over LAN? Are there special Capacitor or Android WebView settings I need to enable?

UPDATED:

I have tried:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">10.0.0.193</domain>
    </domain-config>
</network-security-config>

    <application
        ...
        android:usesCleartextTraffic="true"
        android:networkSecurityConfig="@xml/network_security_config">

Still didn't work. same problem. I got this warning though:

Attribute networkSecurityConfig is only used in API level 24 and higher (current min is 23)

Hrach · Accepted Answer · 2025-09-24 06:03:48Z

1

Do you have a file inside android/app/src/main/res/xml/network_security_config.xml?
If not try once.

network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">10.0.0.193</domain>
  </domain-config>
</network-security-config>


and then reference in AndroidManifest.xml

<application
    android:usesCleartextTraffic="true"
    android:networkSecurityConfig="@xml/network_security_config"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

answered Sep 24 at 6:03

Hrach

311 silver badge6 bronze badges

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

Comments

Amir Hossein · Accepted Answer · 2025-09-24 09:22:09Z

1

On Android, HTTP (cleartext) traffic is blocked by default. Your app can’t reach

http://10.0.0.193:3000

from the WebView unless you explicitly allow it.

Solution:

1. Create

android/app/src/main/res/xml/network_security_config.xml

(create the

xml

folder if it doesn’t exist):

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">10.0.0.193</domain>
  </domain-config>
</network-security-config>

2. Update

AndroidManifest.xml

inside the

<application>

tag:

<application
    android:usesCleartextTraffic="true"
    android:networkSecurityConfig="@xml/network_security_config"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    ...
</application>

3. Rebuild the Android project.

Now your Capacitor app can connect to the local backend over HTTP.

https://www.linkedin.com/posts/amirhosseinrashidii1_network-android-react-activity-7376545301425328129-G0Ia?utm_source=share&utm_medium=member_android&rcm=ACoAAF52UO8BpEyzSRR3jYdIZTHh632CK0C6OtM

answered Sep 24 at 9:22

Amir Hossein

93 bronze badges

1 Comment

Brentspine Sep 24 at 10:39

It says, that the post cannot be displayed

Collectives™ on Stack Overflow

React + Capacitor Android app cannot reach local Node backend over HTTP, but browser can

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related