Question

我有一个片段，它要求来自网址的图片：

var toDataURL = url => fetch(url, {mode: "no-cors"})
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))


toDataURL('https://www.google.hu/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
  })

代码段取自this thread

这段代码要求google徽标，它的工作正常。我可以在网络选项卡中看到成功的图像响应，我可以看到图像本身，也可以将base64代码返回到控制台（您可以通过将其复制并粘贴到Chrome控制台来尝试）

但是，如果我将网址更改为：https://images.dog.ceo/breeds/husky/n02110185_12748.jpg

我没有在控制台中获取base64代码。请求成功，它在响应中可见，但不返回base64。

我尝试了几张图片，大部分时间都是png，而jpeg则没有。{/ p>

FileReader api中是否还有其他设置？

Answer 1

如果查看images.dog.ceo/breeds/husky/n02110185_12748.jpg源，则响应标头不包含Allow-Access-Control-Origin（https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin）。

所以从另一个域你永远不会得到这个客户端。但是，如果您打开该位置，然后打开控制台并粘贴代码，您将看到将记录dataURL。

考虑白名单域名并尽可能添加适当的标题，以获得一些灵感：

Access-Control-Allow-Origin Multiple Origin Domains?

使用Javascript从URL获取base64图像

1 个答案: