Safari本地文件Web Worker中FileReader的CORS问题及解决方法咨询

我需要在浏览器中用JavaScript处理本地文件，由于处理过程包含大量RegEx.exec()操作耗时较长，因此将FileReader及处理逻辑放在Web Worker中。该方案在Google Chrome和Microsoft Edge中运行正常，但在macOS Safari 16.5.1中出现问题。

当通过file:///path/to/localfile.html直接从本地文件系统加载以下简化代码时，Safari无法正常工作：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script id="worker" type="javascript/worker">
    self.onmessage = function(evt) {
        var file = evt.data;
        var filereader = new FileReaderSync();
        console.log(filereader.readAsText(file,'UTF-8'));
    };
</script>
<script type="text/javascript">
    function on_change(evt) {
        const workerblob = new Blob(
            [document.querySelector('#worker').textContent],
            {type:"text/javascript"});
        new Worker(window.URL.createObjectURL(workerblob)).postMessage(evt.target.files[0]);
    };
</script>
</head>
<body>
<input id="fileselector" type="file" onchange="on_change(event)">
</body>
</html>

Safari控制台显示三条错误信息：

• Cannot load blob:null/ff4c37bb-8ddb-4082-a492-425423e35ef9。
• Failed to load resource: Cross origin requests are not allowed when using same-origin fetch mode。
• NotReadableError: The I/O read operation failed。

补充细节：

• 若HTML通过HTTP服务器托管并以常规HTTP/HTTPS请求加载，可正常运行。
• Chrome和Edge加载本地文件系统的HTML时不会出现CORS问题。
• 仅当在Web Worker中调用FileReader时，Safari才会出现CORS问题。

我需要交付HTML文件作为最终产品，客户不愿额外部署Web服务器，因此必须支持本地文件系统加载。另外已尝试使用FileReader，结果相同，这是CORS相关问题，FileReader和FileReaderSync表现一致。

可行解决办法 #

方案1：用Data URL替代Blob URL加载Worker #

Safari对file://协议下的Blob URL有严格同源限制，改用Data URL直接内嵌Worker代码，避免跨域请求：

function on_change(evt) {
    // 提取Worker代码并转为base64编码的Data URL
    const workerCode = document.querySelector('#worker').textContent;
    const dataUrl = 'data:text/javascript;base64,' + btoa(workerCode);
    const worker = new Worker(dataUrl);
    worker.postMessage(evt.target.files[0]);
}

此方法无需额外资源请求，直接绕过Blob URL的加载限制。

方案2：主线程预读文件后传递数据给Worker #

在主线程完成File的读取操作，再将文本/二进制数据传给Worker处理，避免Worker直接操作File对象：

// 主线程代码
function on_change(evt) {
    const file = evt.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        const workerblob = new Blob(
            [document.querySelector('#worker').textContent],
            {type:"text/javascript"});
        const worker = new Worker(window.URL.createObjectURL(workerblob));
        // 传递已读取的文本数据
        worker.postMessage(e.target.result);
    };
    reader.readAsText(file, 'UTF-8');
}

// Worker代码修改为接收文本数据
self.onmessage = function(evt) {
    const text = evt.data;
    console.log(text);
    // 在此执行正则处理逻辑
};

该方法从根源规避了Worker读取File的CORS问题，仅主线程做一次文件读取，后续耗时逻辑仍在Worker中执行，对用户体验影响极小。

方案3：修改Safari安全设置（不推荐） #

让用户手动关闭Safari的本地文件限制：

• 打开Safari偏好设置→高级，勾选「显示开发菜单」
• 点击顶部菜单栏「开发」→「停用本地文件限制」
  此方法需用户手动操作，不适合作为产品交付的通用解决方案。

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