[AC-6291] iOS: Cors issue in WKWebView (sdk 8.0.1)
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | n/a |
| Status | Open |
| Resolution | Unresolved |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | Titanium SDK & CLI |
| Labels | 8.0.1, 8.1.0.GA, 8.2.0.GA, 8.3.0, 9.0.0.RC, ios, webView |
| Reporter | Portal |
| Assignee | Vijay Singh |
| Created | 2019-06-19T07:52:32.000+0000 |
| Updated | 2020-03-19T11:56:47.000+0000 |
Description
I'm testing an app with sdk 8.0.1 but the webview component has changed (now is WKWebView) and fails to load a SPA with AngularJS ngRoute navigation, showing a cors error:
_Cross origin requests are only supported for HTTP_
The app works fine with sdk 7.4.1.
I think the problem is the WkWebView is missing property allowFileAccessFromFileURLs which seems to solve Cors issues.
*To Reproduce*
1 - Create a window containing a webview with url:'index.html'
2 - Create index.html file containing an AngularJS single page application with angular version 1.4.7 and ngRoute navigation, for example:
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
</head>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#/red">Red</a>
<a href="#/green">Green</a>
<a href="#/blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
})
.when("/blue", {
templateUrl : "blue.html"
});
});
</script>
</body>
</html>
Attachments
| File | Date | Size |
|---|---|---|
| Screen Shot 2019-07-24 at 6.43.48 PM.png | 2019-07-24T15:44:03.000+0000 | 22684 |
| Screenshot 2019-10-26 at 2.22.43 PM.png | 2019-10-26T08:25:30.000+0000 | 16480 |
| Simulator Screen Shot - iPad Air 2 - 2019-08-19 at 15.45.08.png | 2019-08-19T09:47:38.000+0000 | 74972 |
any news? It starts getting critical because we can't migrate sdk as far as loading local templates causes cors errors.
@Portal , if you are using your own API's you can solve your issue by adding this headers to your API's that you access using a webview: 'Access-Control-Allow-Origin': '*'
@Muhammad Ahmed Fahad Unfortunately the issue is not related to an API call, we can't load html files through AngularJS routing because webview doesn't trust anymore ajax calls to load resources with the file URI scheme.
Hello, I have tested the sample HTML code as a local HTML file in a classic app. I don't see any error during runtime. I have tested with SDK 8.0.2.GA in iOS simulator. The webview loads fine. !Screen Shot 2019-07-24 at 6.43.48 PM.png|thumbnail! . Try with the latest SDK 8.0.2.GA. Let us know. Thanks.
We tried updating to SDK 8.0.2.GA but keep getting the same error. Tested on simulator Ipad Air 2 IOS 12.1.
Hello, Tested this with SDK 8.1.0.GA on Ipad Air 2 and got the following output: !Simulator Screen Shot - iPad Air 2 - 2019-08-19 at 15.45.08.png|thumbnail! Can you please test this on SDK 8.1.0.GA and let us know the result?
Hello, we tried updating to sdk 8.1.0.GA but we keep getting this error during installation: [ERROR] : Error: spawn EACCES at _errnoException (util.js:992:11) at ChildProcess.spawn (internal/child_process.js:323:11) at exports.spawn (child_process.js:502:9) at iOSBuilder.
Hello, Here are a couple of things to try and let us know if this works for you. * Make sure you have the latest Appc CLI from NPM : sudo npm install -g appcelerator * To check which version you are on, run : npm list -g --depth 0 appcelerator * run the setup command with debug and trace flags turned on : DEBUG=* appc setup -l trace Next, try a clean install of your Appc CLI: * Uninstall Appc CLI from NPM global path : sudo npm uninstall -g appcelerator * Remove Appc CLI installed locally : sudo rm -rf .appcelerator * Cache clean from NPM : sudo npm cache clean * Then, reinstall Appc CLI from NPM : sudo npm install -g appcelerator * Run setup : appc setup Thanks.
We managed to install the app with the new SDK but it continues to fail routing showing us just a blank page. Could you share with us the working sample tested with SDK 8.1.0.GA? Could it be a problem linked to environment configuration?
Could you share with us the working sample tested with SDK 8.1.0.GA? Could it be a problem linked to environment configuration?
Hi again, any news?
Hello , Can you please test this issue on 8.1.1.GA and let us know the results?
Hi, we tested 8.1.1.GA and we are getting the same error described for 8.0.2.GA.
Hello, Are you able to get that sorted out? Tested this issue on 8.2.1.GA and got the following as output: !Screenshot 2019-10-26 at 2.22.43 PM.png|thumbnail! Can you please test this on 8.2.1.GA? Please let us know if you need more help with this issue.
Tested and got same error (iOS 13.0). Could you please give us a sample code showing how you are instantiating and loading the webview? Thanks
Hi [~portal@quix.it], If I just add the index.html on any project then Create a window containing a webview with url:'index.html' using latest SDK 8.3.0.GA, I cannot reproduce the issue on my end. My test code is:
var win = Ti.UI.createWindow(); var webview = Ti.UI.createWebView({ url : 'index.html' }); win.add(webview); win.open();Same error. The error is triggered when trying to navigate to other pages from the index (red, green or blue html from the example), index.html is correctly displayed. We seriously need it working, we can't go on with workarounds anymore...
See TIMOB-27159. Probably it will fix the issue. It has new property 'assetsDirectory' which can be used to whitelist the resources. Let me know if it fixes or share a complete test app. Thanks!
Unfortunately we tried and it doesn't fix the issue because the problem is not linked to titanium impossibility to load the file from resources. The WKWebView enforces strict CORS settings so angularjs is unable to load urls with file scheme. The test described in the task is still valid... just try to navigate using angularjs routing inside the webview.