我使用 webpack 编写了一个页面并将其集成到 shopify 商店中。该站点在我的本地服务器上运行良好，但在 shopify 服务器上运行良好。
问题是由于这部分：
return fetch(filePath)
// Retrieve its body as ReadableStream
.then(response => response.body)
// Create a gray-scaled PNG stream out of the original
.then(rs => {
console.log(rs)
return rs.pipeThrough(
new TransformStream({
transform: async (chunk, controller) => {
try {
const decryptedChunk = decipher.update(chunk)
controller.enqueue(decryptedChunk)
} catch (err) {
console.error(err)
}
}
})
)
})
// Create a new response out of the stream
.then(rs => new Response(rs))
// Create an object URL for the response
.then(response => response.blob())
.then(blob => URL.createObjectURL(blob))
// return the URL
.then((responseURL) => { return responseURL })
.catch(console.error)
它在我的本地“Windows 10”计算机上运行良好，带有 shopify 主题服务。每个目标文件加载四个块。它在 CentOS 7 服务器上的先前站点版本中也可以正常工作。
将页面推送到 shopify 服务器时，目标文件未完全加载。只有一个碎片块被加载，仅此而已。
我尝试过 Brave、Chrome、Firefox 和 Edge。所有相同的结果。似乎 fetch 没有下载完整的文件。
更新： url 由 shopify 动态计算，类似于“https://cdn.shopify.com/s/files/1/0592/8421/4512/t/1/assets/42a0ee4e462cc7ac412522343.zip”
在本地，文件已使用 fetch 正确加载，并且可以使用提供的链接直接从浏览器下载。
在 shopify 服务器上，提取不起作用。当我尝试从浏览器直接下载时，它会返回一个名称正确的 1ko 文件（而不是 ~100ko）。