Ionic: Problems sending HTTP Requests to API in Emulator

Ionic Framework ionic-v3
1

Hi all,

So I’ve done a lot of digging and can’t quite figure out the problem here. I have an ionic 2 app that’s sending requests to a backend API I created using Node and Express.

The app works fine in the web browser and all my http requests function as expected, thus populating the pages correctly. However, when I switch to the emulator, my calls are not pushing through. I’ve taken the liberty to go through some cursory steps to get the ball rolling. I have done the following:

  1. I’ve added the following tag to my index.ts file:

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

  1. I’ve adjusted the config.xml to hit the backend API as an allowed navigation on my local machine – although I’m not sure if this one was entirely necessary.
<allow-navigation href="http://localhost:3000/api/*" />

  1. I’ve ensured that the cordova whitelist plugin is installed.

  2. Ran postman against the app to ensure objects returned were correct. Everything is A-OK here. Additionally I checked the app in the web browser and everything functions fine there, it ONLY doesn’t work in the emulator

  3. I’ve run chrome://inspect/#devices in the web browser. Here is the error I am receiving:

localhost:3000/api/customerSchema/testemail@novacodellc.com Failed to load resource: net::ERR_CONNECTION_REFUSED

XHR failed loading: GET “http://localhost:3000/api/customerSchema/testemail@novacodellc.com”.

The error object provides the following:

Response
   headers: Headers
   ok: false
   status: 0
   type: 3
   url: null

A look at the request in the networks tab shows me the following information:

General
Request URL:http://localhost:3000/api/customerSchema/testemail@novacodellc.com
Referrer Policy:no-referrer-when-downgrade

Requested Headers

Provisional headers are shown
Accept:application/json, text/plain, /
User-Agent:Mozilla/5.0 (Linux; Android 8.0.0; Android SDK built for x86 Build/OSR1.170720.005; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/58.0.3029.125 Mobile Safari/537.36

  1. Server side code does have CORS enabled and again I this has been tested on the app in browser and works correctly there.

I’m hoping someone can shed some insight on what may be going wrong, and what alterations I need in my files to get the emulator working as expected. It looks CORS related to me, but I’m a little befuddled at this point. Any thoughts?

2

Can you try using your ip instead of localhost ?

3 Likes
3

Epic! You nailed it. I just had to change the url from localhost to the ip address. I knew it was going to be something really simple and incredibly dumb.

This was dogging me all last night. I truly and greatly appreciate the assistance.