Ionic 5 app not getting data from REST API on android

Issue

I've built an ionic app that utilizes Vue, Capacitor and a Strapi backend deployed on heroku. I'm using the fetch() api to make the api calls.

The app works without errors in the browser but when complied to android and installed on my device (Android 9) I get SyntaxError: Unexpected token < in JSON at position 0 on the homepage where I'm using Vue's <Suspense> component to display an error message.

All other pages are blank and I'm unable to perform POST requests.

This is my first ionic and mobile app for that matter so I'm not sure how to debug this issue.

Solution

I would suggest you to use capacitor http plugin for API calls from a mobile device: https://github.com/capacitor-community/http You can avoid CORS issues using this plugin, too.

In the documentation, the configuration for Android is missing, so add it like following.

1- Import and add http plugin in android\app\src\main\java\MainActivity.java

package com.myapp.com;

import android.os.Bundle;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;
import com.getcapacitor.plugin.http.Http; //added

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(Http.class); //added
    }});
  }
}

2- Sync gradle files in Android Studio:

File --> Sync Project with Gradle Files

In package.json, the dependencies should be like following:

"@capacitor-community/http": "^1.0.0",
"@capacitor/android": "^3.0.0",
"@capacitor/core": "^3.0.0",

Answered By - Ani