Blazor WebView WPF混合应用中WebView2外部JS Source Maps加载问题

先排查你的WebResourceRequested代码未生效的可能原因 #

• 请求拦截范围没覆盖源映射文件：你可能只监听了.js文件的请求，没针对.map文件做拦截。DevTools报错的是xxx.min.js.map，得确保你的事件处理逻辑里包含了这类.map后缀的请求，或者精准匹配到了https://0.0.0.0/lib/xxx.min.js.map这个URL。
• 事件注册时机太晚：如果是在WebView2的CoreWebView2InitializationCompleted事件触发后很久才注册WebResourceRequested，那JS文件已经加载完毕，源映射的请求早就发出去了，根本没被拦截到。正确做法是在初始化CoreWebView2的过程中（比如EnsureCoreWebView2Async的回调里）就注册这个事件。
• 响应构造不符合要求：源映射文件的MIME类型必须是application/json，如果你的响应没设置这个Content-Type，DevTools会拒绝识别。另外，要是你内联的源映射内容有编码错误（比如读取本地文件时用错编码、没转义特殊字符），也会导致加载失败。
• WebView2配置限制：检查CoreWebView2Settings，确保AllowFileAccessFromFileUrls设为true（如果加载本地源映射文件），同时确认没有其他限制资源请求的配置项生效。

可行的替代方案 #

方案1：修改JS文件的sourceMappingURL指向本地/内联内容 #

既然无法控制原始JS文件，可通过WebResourceRequested拦截xxx.min.js的请求，修改响应内容，替换掉原始的sourceMappingURL：

// 示例：拦截JS文件并修改sourceMappingURL为内联base64
private async void CoreWebView2_WebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs e)
{
    if (e.Request.Uri.EndsWith("xxx.min.js"))
    {
        // 获取原始JS内容
        var originalResponse = await e.Request.GetResponseAsync();
        using var reader = new StreamReader(originalResponse.Content);
        var jsContent = await reader.ReadToEndAsync();
        
        // 替换sourceMappingURL为内联的base64编码源映射
        var mapBytes = File.ReadAllBytes(@"C:\your-local-path\xxx.min.js.map");
        var base64Map = Convert.ToBase64String(mapBytes);
        var modifiedJs = jsContent.Replace(
            "//# sourceMappingURL=https://0.0.0.0/lib/xxx.min.js.map",
            $"//# sourceMappingURL=data:application/json;base64,{base64Map}"
        );
        
        // 构造新响应
        var stream = new MemoryStream(Encoding.UTF8.GetBytes(modifiedJs));
        e.Response = ((CoreWebView2)sender).Environment.CreateWebResourceResponse(
            stream, 
            200, 
            "OK", 
            "Content-Type: application/javascript"
        );
    }
}

方案2：用虚拟主机映射本地文件夹 #

把报错中的https://0.0.0.0/lib映射到本地存放源映射的文件夹，让WebView2请求该地址时自动读取本地文件：

// 在CoreWebView2初始化完成后执行
await webView2.EnsureCoreWebView2Async();
webView2.CoreWebView2.SetVirtualHostNameToFolderMapping(
    "0.0.0.0", 
    @"C:\your-local-folder\lib", 
    CoreWebView2HostResourceAccessKind.Allow
);

注意本地文件夹结构要和URL路径对应，比如C:\your-local-folder\lib\xxx.min.js.map要对应https://0.0.0.0/lib/xxx.min.js.map。

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