I am trying to build my perfectly working ionic web app to android. The app launches, but can’t communicate with my Express backend. I get this error :

Msg: Mixed Content: The page at 'https://localhost/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://{{ip}}:3000/getGroupsNameOfUser'. This request has been blocked; the content must be served over HTTPS.
(with getGroupsNameOfUser being a app.post() of my express server, and {{ip}} the local ip of the computer runing express that I prefer not to share just in case).

I understand that my android app is in https and doesn’t like to communicate with a server in http.

To solve this, I have tried enabling mixed content by adding this line in AndroidManifest.xml:
android:usesCleartextTraffic="true" but it just doesn’t work (I still get the same error).

I have then tried by adding a network_security_config.xml in res/xml/, filled with :

<network-security-config>
    <domain-config cleartextTrafficPermitted="true">

        <domain includeSubdomains="true">http://192.168.1.15:3000</domain>
        <domain includeSubdomains="true">http://127.0.0.1:3000</domain>
    </domain-config>
</network-security-config>

And adding this line in AndroidManifest.xml : android:networkSecurityConfig="@xml/network_security_config" but it doesn’t work either…

I have then tried the recommended solution: putting my express server on ssl. I created self-signed keys with this command : sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout ./selfsigned.key -out selfsigned.crt. I had an error when using them so I used a command I found online : sudo chmod 755 selfsigned.key.

I then wrote my main js script:

const options = {
  key: fs.readFileSync('keys/selfsigned.key'),
  cert: fs.readFileSync('keys/selfsigned.crt')
};

const app = express ();

app.use(bodyParser.json());

app.use(cors({origin: true, credentials: true}));

app.use(cookieParser());


... (multiple app.post(...))


https.createServer(options, app).listen(3000, () => {
  console.log('HTTPS server listening on port 3000');
});

Finally I changed the adress used in my ionic app with HttpClient to “https://{{ip}}:3000/”.

But it still doesn’t work. I get this error :

[ERROR:ssl_client_socket_impl.cc(879)] handshake failed; returned -1, SSL error code 1, net_error -202

2024-05-25 12:08:30.335 22173-22173 Capacitor/Console       io.ionic.starter                     E  File: https://localhost/main.262cd90795cda89d.js - Line 1 - Msg: ERROR [object Object]

2024-05-25 12:08:31.178  1588-2373  VerityUtils             system_server                        E  Failed to measure fs-verity, errno 1: /data/app/~~DnQFZdmZ2tBOfRYWJyZ4Rw==/io.ionic.starter-bZlHBiUj6Wi4udiAfuiCCA==/base.apk

2024-05-25 12:08:31.306  1588-2373  VerityUtils             system_server                        E  Failed to measure fs-verity, errno 1: /data/app/~~DnQFZdmZ2tBOfRYWJyZ4Rw==/io.ionic.starter-bZlHBiUj6Wi4udiAfuiCCA==/base.apk

I don’t understand if the issue is from my backend or my app. I have tried “converting” my key to der with this command : openssl x509 -outform der -in selfsigned.crt -out server.der and adding the file to my phone’s trusted certificates. But it still doesn’t do anything.

Since I can do post requests with postman on https://localhost:3000, I suppose that my express works correctly, at least locally. I have tried with postman on another computer, and it works to if I disable ssl verification. If I try with the webapp (launch with ionic serve --ssl), I get a cors error that I can’t manage to solve, but I won’t care as long as my android app works, which it still does not T.T.

I am completely desperate, I don’t know what else to try. Can anyone help me ?