Post

Replies

Boosts

Views

Activity

Loading Angular project in WKWebView: Cors issues on JS files
Hi, We have an app with a webview loading our Angular app hosted in AWS S3. However we are having a lot of caching and loading/performance issues with this so I suggested to store the Angular App on the phone itself. Something that is done by the likes of Cordova/CapacitorJS. I did get pretty far with the help of another post on this forum by using the code: import UIKit import WebKit class ViewController: UIViewController {   @IBOutlet weak var loadhtml: WKWebView!   override func viewDidLoad() {     super.viewDidLoad()     let webView = WKWebView()     let htmlURL = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "dist")!     webView.loadFileURL(htmlURL, allowingReadAccessTo: htmlURL.deletingLastPathComponent())     view = webView   } } There is a dist folder in the App which hosts all the JS files and the index.html. When I run the app, initially it didn't want to load CSS, images or JS files. I found out that the culprit was <base href="/"> in the html file. I can't remove it because Angular requires it, but I could set it to an empty string. Now images and CSS load. Next issue, JS files almost loading but not because of a CORS issue. Angular adds these JS modules and to the HTML file. <script src="runtime.js" type="module"></script> <script src="polyfills.js" type="module"></script> <script src="vendor.js" type="module"></script> <script src="main.js" type="module"></script> When I remove the type="module" all of a sudden the CORS issue on those 4 files dissapear. However, the Angular app will bring in more files which apparently do have type module embedded and that results in more CORS issues. Like Cross origin requests are only supported for HTTP. XMLHttpRequest cannot load file:///assets/i18n/en.json due to access control checks. Origin null is not allowed by Access-Control-Allow-Origin. Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. file:///Users/matti/Library/Developer/CoreSimulator/Devices/[key]/data/Containers/Bundle/Application/[key]/earnrTest.app/dist/common.js Is there an easy fix for this or do I have to go the way of Cordova/CapacitorJS with creating a custom scheme (WKURLSchemeHandler) as mentioned here https://blog.merzlabs.com/posts/webview-history/. I would really like to get this Local File solution to work because we are stuck without it. Any help appreciated. Cheers, Matti
1
0
1.4k
May ’22