apache / cordova-ios

Apache Cordova iOS
https://cordova.apache.org/
Apache License 2.0
2.15k stars 988 forks source link

WkWebView adding to local files does not allow the files to be found/viewed. #1038

Closed vtebano13 closed 3 years ago

vtebano13 commented 3 years ago

Trying to figure out why these files will not load. The Cordova application is loaded and started from which I am able to serve up files from the main application. Then I would download some files which are then loaded into the cordova.file.dataDirectory. I can see and find the files but when I try to load the file I get "Failed to load resource: The requested URL was not found on this server." This is an SAPUI5 application and the downloaded files are suppose to be served up and loaded (XML views). This worked fine when running on UIWebView but it seems that something is blocking the WKWebView from loading the files.

Other files saved to the same location can be read via fileReader and displayed telling me that reading from the location is possible. It is only when I try serve up the file directory from the location that I get this error.

Running: Cordova-ios 6.1.1 cordova-plugin-wkwebviewxhrfix latest version

The application path is: file:///private/var/containers/Bundle/Application//.app/www/

The folder which the downloaded files are stored: file:///var/mobile/Containers/Data/Application//Library/NoCloud/plug/

image

breautek commented 3 years ago

The reason why you see this is because WKWebView enforces CORS on all network traffic in the browser that is cross-origin. WKWebView will also treat all requests as cross-origin when running from the file:// protocol. Generally speaking, you should be using the cordova-plugin-file APIs to read local files, however it's understandable that some frameworks such as Angular (and I assume SAPUI5) uses XHR to read files. Unfortunately there is no API to change the CORS restrictions but I'll provide two options that are available.

Option 1

Option 1 is to migrate to schemes. This will be the most ideal option for the long term, however there is one caveat. When you use schemes, the origin of your cordova web app will change, thus the location of the web storage will also change and thus become inaccessible. If there is important data stored in cookies, local storage, indexed db, etc, that can't be easily recreated, then Option 2 will be a good short term solution. Alternatively, there is data migration plugins available that is easily adaptable to migrate the web storage data to the new storage containers.

Option 2

If Option 1 is out of the picture because you have important data stored and you cannot migrate it for whatever reason, then using Oracle's plugin will redirect all your XMLHttpRequest calls to a natve layer to bypass those CORS restrictions. Do note this applies only to local file:// urls. I think this plugin is similar to the one you have already installed, but I've personally communicated with Oracle team and I know lots of other people who had success with their plugin.

Because we use GitHub for tracking issues only, I'll be closing this issue. If you require further assistance, I'd invite you to our Slack Community.