Proxy doesn't loading on testing my android device

Ionic Framework ionic-v3
1

Hi, guys!

I’m the newbie with ionic and have a problem with ionic2 & CORS.
My environment is like this,

cli packages: (~/.nvm/versions/node/v8.4.0/lib/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 1.3.12
    Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.5.0
    Ionic Framework    : ionic-angular 3.5.0

System:

    Android SDK Tools : 26.0.2
    ios-deploy        : 1.9.1
    ios-sim           : 6.0.0
    Node              : v8.4.0
    npm               : 5.3.0
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b

As you know, the ionic supports avoid CORS issue through setting proxy.
But in my case, the proxy doesn’t load correctly.

This is proxy setting on my ionic.config.json

{
  "name": "******",
  "app_id": "******",
  "type": "ionic-angular",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://api.******.io/api"
    },
    {
      "path": "/endpoint",
      "proxyUrl": "http://api.******.io/endpoint"
    }
  ],
  "integrations": {
    "cordova": {}
  }
}

When I execute ‘ionic cordova run android --device’, then proxy setting doesn’t loading.
So when my app access server url (ex. /api/user ), console shows that my app access file:///api/user.
I don’t know why doesn’t activate proxy.
But when I add -l option then it load proxy settings.

This is my message for command ‘ionic cordova run android --drvie’

# ionic cordova run android --device
[INFO] Running app-scripts build: --platform android --target cordova

[16:25:03]  build dev started ...
[16:25:03]  clean started ...
[16:25:03]  clean finished in 2 ms
[16:25:03]  copy started ...
[16:25:03]  transpile started ...
[16:25:06]  transpile finished in 3.41 s
[16:25:06]  preprocess started ...
[16:25:06]  deeplinks started ...
[16:25:07]  deeplinks finished in 95 ms
[16:25:07]  preprocess finished in 95 ms
[16:25:07]  webpack started ...
[16:25:07]  copy finished in 3.70 s
[16:25:17]  webpack finished in 10.37 s
[16:25:17]  sass started ...
[16:25:18]  sass finished in 927 ms
[16:25:18]  postprocess started ...
[16:25:18]  removed unused font files
[16:25:18]  postprocess finished in 6 ms
[16:25:18]  lint started ...
[16:25:18]  build dev finished in 14.85 s
> ionic cordova prepare
> cordova prepare
⠙ Running command
....

But this is my message for command ‘ionic cordova run android --device -l’

# ionic cordova run android  --device -l
[INFO] Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --nobrowser --iscordovaserve
       --platform android --target cordova - Ctrl+C to cancel
[16:27:38]  watch started ...
[16:27:38]  build dev started ...
[16:27:38]  Proxy added:/api => http://api.******.io/api            <--- !!!! PROXY ADDED
[16:27:38]  Proxy added:/endpoint => http://api.******.io/endpoint  <--- !!!! PROXY ADDED
[16:27:38]  clean started ...
[16:27:38]  clean finished in 2 ms
[16:27:38]  copy started ...
[16:27:38]  transpile started ...
[16:27:41]  transpile finished in 3.05 s
[16:27:41]  preprocess started ...
[16:27:41]  deeplinks started ...
[16:27:41]  deeplinks finished in 104 ms
[16:27:41]  preprocess finished in 104 ms
[16:27:41]  webpack started ...
[16:27:42]  copy finished in 3.36 s
....

I want to test without livereload option for the release testing.
Anyone do you give some advice for me?

2

The proxy is a thing started and run by the CLI. If you use ionic serve or livereload, the CLI is running in the background doing things - and the proxy. The app uses the IP and port of the proxy for these requests.

When you run the app properly on the device, the CLI is not involed - so there is no proxy.

If your app has CORS issues when running on the device, you have to fix those and can’t use the workaround with the proxy. Means, making sure the backend sends the correct headers etc.

1 Like
3

Thank you for your quick reply and sharing your knowledge :slight_smile:
I understand your advice. I confused about that.

I have another question.
When my app which run on my android deivce send request to back-end server,
my app send header with Origin: file://. And my back-end service return error with 403.
In this case, should I add “file://” into CORS filter at tomcat?
Is this method normal solution? or any other great method exist ?

Thanks

4

That depends on what your Tomcat server is doing. If it sends a 403 because the file:// origin, then yes, add that as a valid origin. It is the actual origin of the call.

5

Thanks! It was very helpful for me.