No backend connection in Android App (Ionic, React) but it's working in Web App with same basic code

Capacitor
1

Problem

I programmed the front end for an app with Ionic (latest version 5.32.1) and React (latest version 17.0.1). The app is hosted as a web app via netlify (https://eis-mit-stil.netlify.app).

I created the backend with node.js (Express.js latest version 4.17.1) and mongoose (version 5.12.3) with a MongoDB database. It’s hosted on Heroku using https://. In the backend I created variables in an .env file - including the origin of the URL above, so that only requests from this website are authorized.

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

In the web app, access to my backend works perfectly.

I proceeded with ionic build → ionic cap add android → ionic cap copy (see documentation from Ionic here: Deploying to iOS and Android | Ionic Documentation) in order to create the Android App and opened it with ionic cap open android in Android Studio. I generated a signed bundle for Google Playstore in Android Studio. The app is now available in the Playstore and was accepted.

Core of the Problem

In my Android app, access to my backend does not work. The users can install the app and everything looks fine, but no data is loaded from my backend and so the registration / login does not work either.

Error message when testing in the emulator

I started the app in the emulator in Android Studio. No access to the backend was possible. This is the error message - maybe this will help, but I don’t know if this is also the problem with the live version.

"06-17 14: 30: 25.185 9621 9621 E Capacitor / Console: File: http: // localhost / login - Line 0 - Msg: Access to fetch at ‘https://[BACKEND-ADRESS]’ from origin ‘http://localhost’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The’ Access-Control-Allow-Origin ‘header has a value’ http: // localhost: 3000 'that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled. "

Questions
The problem must be caused by the Android app’s lack of access to the backend.

  1. Do I have to copy the variables from the .env file to ionic build
    somewhere in Android Studio?
  2. Or do I have to enter the variables
    for the backend access somewhere in the Playstore Console?
  3. Do any of you know how to allow backend access?
  4. What would be a procedure to track down the error?
2

Have you seen the Ionic CORS FAQ?

3

Thanks @rapropos . I’m looking into it but I’m a very beginner with CORS. Now I found out that’s working in the Android App when I set my backend to

app.use(cors({ 
  origin: true, 
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],
}))

But when I set it to the to the recommended safe variant with my .env variable than it’s not working.

app.use(cors({ 
  origin: process.env.ORIGIN, 
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],
}));
4

Yes, that’s exactly what is described in this section of that document, and what your error message is telling you.

Android is going to give you an origin of http://localhost, iOS is going to give you an origin of capacitor://localhost. Your server has to treat those as acceptable.

5

Thank you for the fast answer. I had a knot in my head the whole time. I was wondering which origin URL I have to enter for the Android app. I couldn’t imagine it being just http: // localhost. But it works in the emulator in Android Studio.