PhoneGap Can't Access My Own API Service

Table of Contents

1. Introduction
2. The Fix
3. Environment Info
4. Other Possible Solutions
5. Content Security Policy
6. Conclusion

Introduction

I had an issue where my app couldn't connect to my own API on the actual or emulator Android device. My issue was resolved by making the following change to the root config.xml.

The Fix

// change from this

// to following code

Environment Info

Now, each developer's environment might be different. You might encounter the same issue but fix it with different things. At the point I was fixing my issue, my PhoneGap was using 6.4.2, npm was 3.10.3, Node version was v6.7.0, Android Studio was using 2.2.2, and the Windows OS version was 10.0.14393.

> node -v
> npm -v
> ver
> phonegap version

Other Possible Solutions

Some people also said they had the same issue but because of a missing cordova-plugin-whitelist plugin. My PhoneGap `` already contains that plugin, but if you don't have it, you can try adding it to see if it fixes your issue or not.

Content Security Policy

Also, my issue was related to HTML's Content-Security-Policy. I defined my API over there to make sure all my API calls were allowed, but at the end it still failed on the Android device. After I added my temporary access origin in the root config.xml, even when I removed my Content-Security-Policy tag, it still worked.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' .....

Conclusion

If your PhoneGap app can't access your own API service, try adding access origin settings in the root config.xml. Each developer's environment is different, so the fix may vary. Other things to check include the cordova-plugin-whitelist plugin and the Content-Security-Policy meta tag. PhoneGap may have changed how it handles these configurations across versions.