cordova android app - allow internet connection

Question

I have developed a cordova react application which is working fine when viewed over localhost.

The app includes socket.io to connect to a node.js server running on the local area.network. Again, this functionality is working fine when running over local host.

When I build my android application, and install the.apk, I am unable to connect to the websocket. I believe this is because of a.network error preventing the cordova application from accessing the internal local.network?? or issue with cors??

I have set the following for CORS:

<meta http-equiv="Content-Security-Policy" content="script-src-elem * 'self' gap: 'unsafe-inline'; default-src * 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

Although working over localhost, I recieve Cross-Origin Request Blocked: The same Request Policy disallows reading the remote resource connecting to my local IP 192.161.1.3.

Here is my cordova config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.cordovareactapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>APP</name>
    <description>APP</description>
    <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <icon src="src/img/icon.png" />
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <access origin="*" />
    <allow-navigation href="*"/>

</widget>

I have searched only and found that I need to allow cordova access however I am struggling to resolve this.

I have added the following within my config.xml within the widget tag and under the allow-navigation tab.

<edit-config file="AndroidManifest.xml" target="/manifest" mode="merge">
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    </edit-config>

But then I am unable to build the android application:

    Task :app:mergeDebugResources FAILED

    FAILURE: Build failed with an exception.

    * What went wrong:
    Execution failed for task ':app:mergeDebugResources'.
    > A failure occurred while executing com.android.build.gradle.internal.res.ResourceCompilerRunnable
    > Resource compilation failed. Check logs for details.

Any help to resolve this would be great. I think its an issue with CORS and allowing cordova access to the inte.net.

Answer 1

UPDATE:

I've managed to resolve issues with axios calls returning.network errors. This looks like it was caused by cors.

I resolved these errors by updating config.xml to include:

application android:usesCleartextTraffic="true"

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.cordovareactapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>APP</name>
    <description>APP</description>
    <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <icon src="src/img/icon.png" />
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="*" />
    <access origin="*" />
    <allow-navigation href="*"/>

    <edit-config
            xmlns:android="http://schemas.android.com/apk/res/android"
            file="app/src/main/AndroidManifest.xml"
            mode="merge"
            target="/manifest/application">
        <application android:usesCleartextTraffic="true" />
    </edit-config>

</widget>

I updated the Content-Security-Policy to:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:">

Although this fixes my API calls, I've still got issues with my websocket failing to connect, but hope the above may help someone.