CODEWITHSUNDEEP
cordovaionic-framework
Priya
Priya

Reputation: 76

'file://' has been blocked by CORS policy

I am using ionic3 on my application. I am getting below error for android application for the first time installation. Then after relaunching the app is working correctly.

Access to XMLHttpRequest at '' from origin 'file://' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

software specification is:

cordova 9.0.0
ionic 3
Android platform 8.0.0
Node 10.15.3
Angular 4

plugin list:

cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-firebase-lib 3.3.0 "Google Firebase Plugin"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-insomnia 4.3.0 "Insomnia (prevent screen sleep)"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.19 "cordova-plugin-ionic-webview"
cordova-plugin-market 1.2.0 "Market"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-screen-orientation 3.0.1 "Screen Orientation"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova.plugins.diagnostic 4.0.8 "Diagnostic"
es6-promise-plugin 4.2.2 "Promise"
info.protonet.imageresizer 0.1.1 "Image Resizer"

Solution tried:

  1. whitelist plugin restricted to 1.3.3

  2. added below lines

    <allow-intent href="file://*" />
<allow-intent href="file://" />
<allow-navigation href="file://" />
<allow-navigation href="file://*" />
<allow-navigation href="*" />

  3. checked for upgrading webview and whitelist plugin as well. Nothing worked.

Please suggest for changes if needed. Even in production build, we have not published new build. The old bbuild is getting this issue

Upvotes: 0

Views: 3193

Answers (5)

Aashay karekar
Aashay karekar

Reputation: 960

if you are trying to access file for mobile storage then you should create a local server Using httpd plugin.

https://stackoverflow.com/a/57494421/7456041

Upvotes: 0

Maheswaran Ravisankar
Maheswaran Ravisankar

Reputation: 17920

You can address this by proxying the angular HTTP requests to Native HTTP (cordova HTTP) by the plugin below. By using Native HTTP you will get rid of CORS issue.

https://github.com/sneas/ionic-native-http-connection-backend

Basically, you will be replacing angular HttpBackEnd interface with native implementation of the same. (Provider in AppModule)

providers: [
        {provide: HttpBackend, useClass: NativeHttpFallback, deps: [Platform, NativeHttpBackend, HttpXhrBackend]},
]

Upvotes: 0

Ansley Rodrigues
Ansley Rodrigues

Reputation: 1

Guess it has to do something with chrome update and how from Android v7 onwards android uses the webview via chrome APK and not the system webview.

So ... Updating to the latest version of chrome affected the webview and hence your ionic app (which uses the webview for rendering) crashes..

Found this link helpful https://www.androidpolice.com/2016/07/20/google-explains-chrome-will-become-webview-android-7-0/

Upvotes: 0

Giordano Cardillo
Giordano Cardillo

Reputation: 43

I have the very same issue, I'm calling a backend API from a cordova 6.5.0 application on Android 9.

Before installing Chrome update (v76.0.3809.89 - 30 July) from Play Store, all was working. Now I'ts always a CORS issue when I first install application, or clear application data.

If I start the application and then kill it, after restarting it's all working back again. I think this is a bit odd.

Upvotes: 0

Priya
Priya

Reputation: 76

I found out the answer for it. This issue is coming for the newly updated version of chrome and it's working fine for the old version of chrome in mobile.

Upvotes: 1

Related Questions