WKWebView请求blob URL时出现XMLHttpRequest访问控制错误该如何解决？

根因说明 #

该报错是WKWebView默认安全策略限制了XMLHttpRequest对blob协议资源的跨域检查导致，blob URL属于当前页面内存级别的临时资源，本身不需要发起网络请求，可通过以下方案解决：

方案1：优化注入的JavaScript脚本（优先推荐） #

替换原脚本中的XMLHttpRequest逻辑，直接用fetch API读取blob资源，绕开XHR的跨域校验，修改后脚本如下：

function(url) {   
    function blobToBase64String(blob, callback) {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(this.result.split(",")[1]);
        };
        reader.readAsDataURL(blob);
    }
    if (url.startsWith("blob:")) {
        // 直接用fetch读取同上下文的blob资源，无需发起网络请求
        fetch(url)
        .then(response => response.blob())
        .then(blob => {
            blobToBase64String(blob, function(base64String) {
                webkit.messageHandlers.downloadManager.postMessage({
                    url: url,
                    mimeType: blob.type,
                    size: blob.size,
                    base64String: base64String
                });
            });
        })
        .catch(err => console.error('Blob读取失败：', err));
        return;
    }
    var link = document.createElement("a");
    link.href = url;
    link.dispatchEvent(new MouseEvent("click"));
}

方案2：开启WKWebView跨域访问配置 #

初始化WKWebView时调整配置项，放宽安全校验限制，Swift示例代码如下：

let config = WKWebViewConfiguration()
// 允许文件URL跨域访问
config.preferences.setValue(true, forKey: "allowUniversalAccessFromFileURLs")
config.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
// 允许JavaScript执行
config.preferences.javaScriptEnabled = true
// 初始化webview
let webView = WKWebView(frame: .zero, configuration: config)

如果是OC开发，对应代码如下：

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.preferences setValue:@YES forKey:@"allowUniversalAccessFromFileURLs"];
[config.preferences setValue:@YES forKey:@"allowFileAccessFromFileURLs"];
config.preferences.javaScriptEnabled = YES;
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:config];

方案3：自定义Blob协议处理器（iOS 11+支持） #

如果上述方案都不生效，可实现WKURLSchemeHandler协议，自定义处理blob类型的请求，完全接管blob资源的读取逻辑，从根源避免跨域校验问题。

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