Livereload and Remote Debugging on device: How to make external calls work?

Ionic Framework ionic-v3
1

I have an app that does external calls via Angular and also uses native functionality via Cordova plugins - which means I have to test on devices (real and emulator) to see all functionality (and also not have the CORS issues of browsers).

The CLI has this nice -l or --livereload feature where it rebuilds the HTML/JS part of the app just like ionic serve so I don’t have to build the app again with each change - which saves a lot of time of course.

And then I use Remote Debug your Ionic App · ionic.zone to inspect my app while it is running on the device, see the console logs in a bit prettier way than on the command line (via -c).

Unfortunately when I combine the remote debugging with using livereload on the device, my external calls fail because of CORS issues:

Fetch API cannot load https://example.org/api. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://192.168.10.1:8101’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Does that mean that livereload + remote debugging breaks the advantages of debugging on the device in the first place? Is there a way I can live debug and still have my code work as it normally does on the device?

(Unfortunately the CORS stuff can’t be solved differently, and I fear there will be other things that don’t work as expected on livereload + remote debugging)

1 Like
2

Bump! Any news on this?

1 Like
3

As usual when a local browser and CORS issues are involved, the solution here is to use a Service Proxy:

GitHub - ionic-team/ionic-cli: The Ionic command-line interface

What happens here is that the request that formerly came from the device itself in a file:// context is now coming from a http:// context (the app, being loaded from the livereload server as, in your case, “'http://192.168.10.1:8101”) and so the browser/webview starts checking the CORS headers like it would when developing locally instead of on the device.

Just add e.g. a proxy for /api => https://example.org/api to your ionic.config.json and replace all usages of https://example.org/api in your code by /api.

2 Likes
4

Alternatively - and cleaner! - you can of course make the API you are using add a “Access-Control-Allow-Origin” header with “192.168.10.1:8101”.

5

Oh I wish it was that easy… :wink:

But thanks for the reply, I didn’t know this could also be used on the device.