[SOLVED] MAUI WebView Control and CORS

MAUI WebView Control and CORS

Trying to write a MAUI app using WebView control so I can teach students how to solve complex math problems. I choose to use MathML since it supports most math symbols to include automatically adjusting their size as needed. I also use MathML polyfills written by w3c for fix issues.

The app works in Windows, but in Android I get the following error:

[chromium] [INFO:CONSOLE(641)] "Access to script at 'file:///android_asset/mathml-polyfills-main/all-polyfills.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, https, chrome-untrusted.", source: file:///android_asset/mathml-polyfills-main/acid-test.html (641).

I understand what CORS is but all JavsScript files are in the app. No external requests. I searched the web for a way to get around the CORS issue. I don’t think I want to disable it if there is a way. A.I. says setAllowFileAccessFromFileURLs property was deprecated in API level 30. Webview.settings and ms-appx-web I believe are a WinUI feature. A.I. suggested webview.settings but I don’t know where to place this code. One of the schemes listed was data but that is for embedding files. To use other schemes a web server is required. Do I really have to setup a web server on my Android MAUI app and if som how?

What I’ve tried:

Can't use WebView with local files stored as MauiAssets on Windows · Issue #16646 · dotnet/maui · GitHub

Allow local files (PWA app) in WebView (CORS) · Issue #8380 · dotnet/maui · GitHub

c# - Can't load a local javascript file into the webview - Stack Overflow

WebView - .NET MAUI | Microsoft Learn

javascript - Access to script at "file" from origin 'null' has been blocked by CORS policy - Stack Overflow

From origin 'null' has been blocked by CORS policy: Cross origin requests error - JavaScript - The freeCodeCamp Forum

Below are links to MathML polyfills and my app posted on GitHub. My app already contains all the polyfills. I hope I’m overlooking something stupid although one of the articles I read says this my be a bug.

I did download my source code from GitHub as a customer. It did compile and ran under Windows. It compiled under Android but I did get the CORS error. I'm running VS 2022, Maui 8.

w3c/mathml-polyfills: Polyfills for MathML features (github.com)

mthanson8333/MathML: Use MathML with MAUI WebView control (github.com)

Solution

For me, I found that I needed to set AllowUniversalAccessFromFileURLs to true, but, for good measure, let's set a bunch of these settings via a custom WebViewHandler in your App.xaml.cs constructor:

        public App()
        {
            Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
            {
#if ANDROID
                handler.PlatformView.Settings.JavaScriptEnabled = true;
                handler.PlatformView.Settings.AllowFileAccess = true;
                handler.PlatformView.Settings.AllowFileAccessFromFileURLs = true;
                handler.PlatformView.Settings.AllowUniversalAccessFromFileURLs = true;
#endif
            });

            InitializeComponent();

            MainPage = new AppShell();
        }