Using proxy to solve CORS problem works in browser, not on emulator or device

Question

I'm using Ionic 3, connecting to a simple PHP api. First I ran into problems with CORS, but could resolve them by using a proxy like this:

{
  "name": "demoApp",
  "integrations": {
    "cordova": {}
  },
  "type": "ionic-angular",
  "proxies": [
    {
      "path": "/mapi",
      "proxyUrl": "https://external.domain.com/mapi"
    }
  ]
}

Everything works just fine when testing inside a browser using ionic serve. However when running in the emulator (both ios and android), or an actual device, I receive an 404 error on a clean and simple GET request. Also running a --prod version inside a webbrowser (like so: ionic cordova run browser --prod -l -c) will return the same 404 not found.

The actual error I receive is:

Http failure response for http://localhost:8000/mapi/test: 404 Not Found

Can somebody point me in the right direction here?

Ionic info:

Ionic:

   ionic (Ionic CLI)  : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4, ios 4.5.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 1.2.0, (and 5 other plugins)

System:

   Android SDK Tools : 25.1.7 (/Users/Vincent/Library/Android/sdk)
   ios-deploy        : 1.9.2
   NodeJS            : v9.1.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

score 0 · Answer 1 · answered Sep 16 '18 at 11:11

When you deploy your app to simulator or a device it isn't the same as deploying to web browser. Browser is a 'part' of your machine while simulators are a bit different. Especially when deploying to a phone, your phone is not connected to your computer so when you call localhost it won't know that you want to connect to your computer.

So these are two different problems:

Simulators: It's much easier to connect to you localhost on a simulator since it is running on your computer. From the simulator, you can access your API by using this IP address instead of localhost: http://10.0.2.2:hostport
Devices: This is just like running ionic serve on one computer and running API on a different computer. You can read more about how to connect them here: Accessing localhost:port from Android emulator

Yes I understand the difference, but the issue still is: how can I let my Ionic frontend/app connect to my PHP api, using the proxy settings (so I won't have any CORS problems)? — Vincent, Sep 16 '18 at 13:07
@Vincent, did you find a solution for your issue? I still have the same issue. https://stackoverflow.com/questions/67619052/proxy-url-in-my-package-json-that-im-using-for-solving-cors-issue-in-the-browse — Ani, May 20 '21 at 11:06

score 0 · Answer 2 · answered Sep 16 '18 at 19:13

0

I already faced the problem, you can take a look at the article : https://blog.ionicframework.com/handling-cors-issues-in-ionic/

To simplify things, CROSS problem are only coming when you are using "ionic serve", when you use your application on the emulator or in the device you should not have the problem, you can simply use the "real url".

One of the way to handle this properly is to manage "environment" configuration file and change the "adresse" when changing environment. Retreive the url could look like this :

const url = AppConfig.SERVER_URL + '/mapi"

answered Sep 16 '18 at 19:13

xrobert35

2,488
1
16
15

Thanks. That looked like it was the answer, but after reading the entire article it seems that it will not fix my problem. The article mentions that you DO need a proxy when running `ionic serve`, but also when running `ionic run -l`. As you can see in my original post, that's exactly what I'm doing. I'm running inside the browser, but with livereload enabled. This requires me to use the proxy, that gives me the error.... :-( – Vincent Sep 17 '18 at 05:34
Yep ok, sorry my bad about this livereload, perhaps your proxy is already working when you use "run -l" but the emulator and the device cannot access https://external.domain.com/mapi ? – xrobert35 Sep 17 '18 at 07:28
I think this article can be relevant to you but perphaps you already saw it :https://forum.ionicframework.com/t/livereload-and-remote-debugging-on-device-how-to-make-external-calls-work/96351/3 – xrobert35 Sep 17 '18 at 07:32

Using proxy to solve CORS problem works in browser, not on emulator or device

2 Answers2