Shopify店铺Web Worker跨域问题求助：CDN资源无法访问

问题根源 #

Shopify会把你assets文件夹里的脚本托管到cdn.shopify.com，但你的店铺页面运行在mystore.myshopify.com域名下。Web Worker的同源策略不允许从不同域名加载脚本，因此触发了“cannot be accessed from origin”的跨域错误。

可行解决方案 #

方案1：通过Blob URL中转加载Worker脚本 #

先从CDN拉取Worker脚本内容，再转换成当前域名的Blob URL来创建Worker，绕开跨域限制。修改你的主线程代码如下：

var worker;
testWorker();
function testWorker() 
{
    if (typeof(Worker) !== "undefined") 
    {
        if (typeof(worker) == "undefined") 
        {
            // 先请求CDN上的Worker脚本
            fetch("{{ 'webworkertest.js'| asset_url }}")
                .then(res => res.text())
                .then(workerCode => {
                    // 把脚本内容转成Blob对象，生成同域URL
                    const blob = new Blob([workerCode], { type: 'application/javascript' });
                    const workerUrl = URL.createObjectURL(blob);
                    worker = new Worker(workerUrl);
                    
                    worker.onmessage = function(event) 
                    {
                        document.getElementById("loopcount").innerHTML = event.data;
                    };

                    // Worker终止时释放Blob URL资源
                    worker.addEventListener('terminate', () => {
                        URL.revokeObjectURL(workerUrl);
                    });
                })
                .catch(err => {
                    document.getElementById("loopcount").innerHTML = "加载Worker失败: " + err.message;
                });
        }
    }
    else 
    {
        document.getElementById("loopcount").innerHTML = "Web Worker not supported";
    }
}

function terminateWorker() 
{ 
    if (worker) {
        worker.terminate();
        worker = undefined;
    }
}

testMainThread();
function testMainThread() 
{
    for (var i = 0; i < 200000; i++) 
    { 
        document.getElementById("loopcount").innerHTML = "Main Thread Counter: " + i;
    }
}

方案2：内联Worker代码（适合简单逻辑） #

如果你的Worker代码逻辑不复杂，可以直接把代码写在主线程里，省去CDN请求步骤：

var worker;
testWorker();
function testWorker() 
{
    if (typeof(Worker) !== "undefined") 
    {
        if (typeof(worker) == "undefined") 
        {
            // 直接定义Worker内部代码
            const workerCode = `
i = 0;
while (i < 200000) {
    postMessage("Web Worker Counter: " + i);
    i++;
}
`;
            const blob = new Blob([workerCode], { type: 'application/javascript' });
            const workerUrl = URL.createObjectURL(blob);
            worker = new Worker(workerUrl);
            
            worker.onmessage = function(event) 
            {
                document.getElementById("loopcount").innerHTML = event.data;
            };

            worker.addEventListener('terminate', () => {
                URL.revokeObjectURL(workerUrl);
            });
        }
    }
    else 
    {
        document.getElementById("loopcount").innerHTML = "Web Worker not supported";
    }
}

function terminateWorker() 
{ 
    if (worker) {
        worker.terminate();
        worker = undefined;
    }
}

testMainThread();
function testMainThread() 
{
    for (var i = 0; i < 200000; i++) 
    { 
        document.getElementById("loopcount").innerHTML = "Main Thread Counter: " + i;
    }
}

注意事项 #

• Blob URL属于当前页面的同源域，因此不会触发跨域限制。
• 记得在Worker终止时调用URL.revokeObjectURL()释放资源，避免内存浪费。
• 方案1适合需要单独维护Worker脚本的场景，方案2适合快速实现简单逻辑。

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