MAUI WebView Android端本地MathML脚本CORS阻塞问题求助

核心结论 #

不需要搭建独立Web服务器，通过调整资源配置、WebView设置和路径引用即可解决问题。

解决方案步骤 #

1. 确认本地资源的嵌入配置

确保所有MathML相关文件（HTML、JS）的生成操作设置为AndroidAsset：

• 在Visual Studio中选中目标文件，打开属性面板
• 设置「生成操作」为AndroidAsset，「复制到输出目录」为「如果较新则复制」

2. 自定义Android WebView配置（替代废弃的setAllowFileAccessFromFileURLs）

通过MAUI的自定义Handler配置WebView权限，允许本地资源跨访问：

// 项目目录/Platforms/Android/CustomWebViewHandler.cs
using Android.Webkit;
using Microsoft.Maui.Handlers;

namespace YourAppNamespace.Platforms.Android;

public class CustomWebViewHandler : WebViewHandler
{
    protected override void ConnectHandler(Android.Webkit.WebView platformView)
    {
        base.ConnectHandler(platformView);
        var settings = platformView.Settings;
        // 允许文件访问
        settings.AllowFileAccess = true;
        // 允许file://协议下的资源跨访问（API 30+仍有效）
        settings.AllowUniversalAccessFromFileURLs = true;
        // 启用JavaScript（必须开启，否则polyfills无法运行）
        settings.JavaScriptEnabled = true;
    }
}

在MauiProgram.cs中注册该Handler：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<IWebView, CustomWebViewHandler>();
#endif
});

3. 优化HTML中的JS引用路径

使用相对路径引用本地JS文件，避免绝对路径触发跨源检测：

<!-- 正确写法：同目录下的JS文件 -->
<script src="all-polyfills.js"></script>

<!-- 错误写法：绝对路径会触发CORS -->
<!-- <script src="file:///android_asset/mathml-polyfills-main/all-polyfills.js"></script> -->

4. 动态内容备选方案

如果需要动态生成HTML内容，可直接将JS代码嵌入HTML字符串中，彻底避免文件跨访问：

// 读取本地JS文件内容
var jsContent = File.ReadAllText("mathml-polyfills-main/all-polyfills.js");
// 拼接包含MathML和polyfills的HTML
var htmlContent = $@"
<html>
    <head>
        <script>{jsContent}</script>
    </head>
    <body>
        <!-- 你的MathML教学内容 -->
        <math>
            <msup><mi>x</mi><mn>2</mn></msup>
        </math>
    </body>
</html>";
// 加载到WebView
webView.Source = new HtmlWebViewSource { Html = htmlContent };

为什么不需要Web服务器 #

Android WebView通过AllowUniversalAccessFromFileURLs配置，允许同一file:///android_asset/路径下的资源相互访问，完全满足本地MathML polyfills的加载需求，无需额外搭建HTTP服务器。

内容的提问来源于stack exchange，提问作者MikeH