Proxy Problems with Ionic

Ionic Framework ionic-v3
23

Hi All,

I’m having trouble accessing google api’s at the moment on device (ironically). Kind of reverse to what problem many of you have. Because when you run ionic run android -l it uses the IP of the phone, 192.168.0.1.x as the base instead of localhost (as on my laptop environment)- googles api security does not accept any requests when I test on my phone.

Any suggestions?

I’m trying a way around by creating a node proxy on my server and relaying packets, though for authentication I’m still not sure how this would work. Hoping for an easier solution!

Appreciate any time and help, as I’m still Learning.

Thanks,
Kieran

24

Here is a sample project with proxy setup and small server returning static data.

Please note, that proxies only work during ionic serve.

Also note, ionic run -lc DOES NOT work with recent changes in cordova/OS updates. The livereload request will be blocked.

3 Likes
25

@mhartington Thanks for providing a sample project on proxy problem with ionic-2.

I need help in my case, I have to hit multiple URL for performing different actions/operations.

for example:
To Authenticate - https://my-domain.com/web/session/authenticate
To get session info - https://my-domain.com/web/session/get_session_info
To search read - https://my-domain.com/web/dataset/search_read

To Read - https://my-domain.com/web/dataset/call_kw/project.task/create
To Read - https://my-domain.com/web/dataset/call_kw/project.task/read
To Write - https://my-domain.com/web/dataset/call_kw/project.task/write
To Delete - https://my-domain.com/web/dataset/call_kw/project.task/unlink

https://my-domain.com/web/session/ and https://my-domain.com/web/dataset/call_kw/ this remains common in many of the places.
The changing part is project.task/write or project.task/create or authenticate, etc.

Can you please help how can I handle this in proxy? I’m not able to make it for multiple URLs.

Thanks in advance.

26

There is no need to proxy every URL. Simply add a proxy for your Domain.

{
“path”: “/api”,
“proxyUrl”: " https://my-domain.com/"
}

Your calls in your app should then go to /api/web/sessions/authenticate.

It might be helpful for someone who is new to proxys to test with node module “http-server”. Just install with npm i -g http-server. It will only create a server at any port u want. Then any request is logged to the console. So you can play around with the paths until you see that you have the correct settings. Then change to your actual url ( before you use e.g. http://localhost:8080 as proxy url).

See http://blog.thecodecampus.de/ionic-2-proxy-development/ for more details about Proxys in Ionic 2 and how to test them with http-server. :slight_smile:

2 Likes
27

@CanKattw Thanks for your valuable input. :slight_smile:
I’ll check and let you know.

Another thing I want to ask is [quote=“CanKattw, post:26, topic:43354”]
“path”: “/api”, <== over here
[/quote]

at the path is there need to provide /api? Because in my URL, there is no /path anywhere.
Is there mandatory?

Thanks in advance.

28

“path”: “/api”, -> you call this while ionic serve e.g in your http gets:

http.get('/api/web/sessions/authenticate')

which will be resolved to the proxyUrl.

2 Likes
29

Ohh… Now I got it :sweat_smile:
@CanKattw Thanks for your prompt reply.

30

This solution is not working anymore. :frowning:
I cannot make my requests.

31

Guys, I solved my problem installing a chrome plugin: “Allow-Control-Allow-Origin *” (yeah, It’s the plugin name).

4 Likes
32

Hi Srinu, Thanks This has worked for me.

33

I’m probably missing something, but here’s what I’m doing and I’m getting a 404:

ionic.config.js

    {
      "name": "AppName",
      "app_id": "",
      "v2": true,
      "typescript": true,
      "proxies": [
        {
          "path": "/forecast/",
          "proxyUrl": "https://api.darksky.net/forecast/"
        }
      ]
    }

home.ts

this.http.get('/forecast/'+this.key+'/'+this.latitude+','+this.longitude+'?units=ca&exclude=alerts,flags,madis-stations,daily,minutely,hourly')`

Error in console:

error_handler.js:47 EXCEPTION: Response with status: 404 Not Found for URL: http://localhost:8100/forecast/myKeyShowCorrectly/43.669579,-79.38863?units=ca&exclude=alerts,flags,madis-stations,daily,minutely,hourly

If I add the correct URL path (https://api.darksky.net/forecast/) to the combined string, it works in Postman. So for some reason the proxy isn’t passing https://api.darksky.net/forecast/ correctly to the called URL.

Have at me! What am I missing?

Thank you.

1 Like
34

Same problem here.

Using ionic serve works fine but ionic run android just fails because /api does not exist.

How are we supposed to deal with this? Some kind of NODE_ENV-hot-loading-path-changing-base-url?

35

The API is not made to work on a localhist basis.
If you work wil a CUSTOM datasource, it’ss mage for your + items.daasource.

I Wont.

36

Hi, same problem here. If I create proxy, it works with ionic serve, but does’nt work with ionic run, because “file:///api/sales.php Failed to load resource: net::ERR_FILE_NOT_FOUND”. Any ideas? Thanks!

37

Did you restart ionic serve?

38

This worked for me. Thanks for saving me hours!

39

Hey Guys,

Few more details about the above implementation.

{
“name”: “myApp”,
“app_id”: “”,
“v2”: true,
“proxies”: [
{
“path”: “/api”,
“proxyUrl”: “http://xxxxxxxxx”
}
]
}

The above code given by kattasrinu is perfectly fine except that the ‘proxyUrl’ should contain /api at the end. So the updated code would look like this.

{
“name”: “myApp”,
“app_id”: “”,
“v2”: true,
“proxies”: [
{
“path”: “/api”,
“proxyUrl”: “http://xxxxxxxxx/api”
}
]
}

If we don’t add /api, it wont work and would give a CORSE error.

Thank you kattasrinu for the great piece of code.

1 Like
40

Oh I love u so much! That was my problem :sweat_smile:

41

Saved me from 1 hour searching

42

[ERROR] The config file (.\ionic.config.json) is not valid JSON format. after modifying

I validated my code in https://jsonlint.com/

here is my code

{
  "name": "eventsPro",
  "app_id": "3bf0810b",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "v2": true,
  "typescript": true,
  "proxies": [
    {
      "path": "/app",
      "proxyUrl": "https://www.bizcentra.com"
    }
  ]
}