Ionic-framework: origin file:// versus http://

[teddykh]

I came across 3 issues on this topic and all 3 are now closed with no solution.

12607

10311

8129

My ionic is first calling a authorization endpoint to get an access-token for further calling other APIs. The first call give a 403 Forbidden and it seems to me it is because of the origin = file://.

Is there any updates about this issue?

[dwieeb]

Hi @teddykh!

The file:// protocol has been an issue with Cordova apps since day 1. Angular HTTP, XHR, fetch, etc. all use Origin: file:// because that's how the Cordova Web View serves app assets.

Starting with version 2.0.0 of Ionic's Web View Plugin (which works for all versions of Ionic), a native HTTP server runs for both iOS _and_ Android, and serves app assets from the http:// protocol. This means the Web View will use Origin: http://localhost:8080.

But even still, some servers may not allow an origin such as http://localhost:8080. If you're trying to access an API, this means the server has not properly implemented CORS (Cross-Origin Resource Sharing). In the preflight request, you can inspect the server's origin header rules by looking at the Access-Control-Allow-Origin response header.

If http://localhost:8080 is not an allowed origin for the service you're using, these are the alternatives:

• Firstly, you can and should file a ticket with the service telling them that all Ionic apps can't use it without http://localhost:8080 as an allowed origin. Send them this link if they don't know what you're talking about: https://enable-cors.org/server.html
• You can use the Advanced HTTP Plugin for Cordova, which uses native requests and bypasses the entire CORS process. Ionic Native has a nice wrapper for it.
• You can set up a server that proxies requests from your app to your service. People use an nginx proxy, AWS lambda, etc.

More resources:

• Ionic Web View documentation
• enable-cors.org
• MDN docs for CORS
• CORS specification

[olegd1c]

Angular6 + Capacitor. I have the same problem.

[dwieeb]

@olegd1c Capacitor doesn't use file:// to serve web assets. Perhaps elaborate on what you're referring to?

[teddykh]

@dwieeb Advanced HTTP Plugin (wrapped in Ionic) seems to solve the problem.
Thanks!!

[dwieeb]

@teddykh Great to hear! Yes, I believe the Advanced HTTP Plugin is the most common option. 😄

[dwieeb]

Closing! The resolution I believe is this: make sure you have the latest Web View plugin, which uses http:// to serve app assets, not file://.

If the service you're using still doesn't like the origin, you should look through the checklist in my original comment to see available workarounds.

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.