如何在客户端访问从一个域到另一个域的 blob

Question

假设我有两个域

• 美国广播公司
• xyz.com

我从服务器收到一个 blob（让我们在 abc.com 上说），这就是我获取该博客网址的方式：

    var pdfFile = new Blob([(blob)], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(this.pdfFile);
    this.url = fileURL;

现在我有了 url，我只想从托管在另一个域上的另一个网站 (xyz.com) 访问该 blob。

当我在 abc.com 中获取 blob 时，我会在新选项卡中打开我的其他网站 xyz.com，这样它就有 blob 的链接。但是如何使用该链接访问该 blob？

目前我正在 xyz.com 上尝试这个：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http%3A//abc.com', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    var myBlob = this.response;
  }
};
xhr.send();

但它给出了我的错误，当然它应该是因为不同的域

无法加载 blob：http://myBlobFullURL跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

Answer 1

由于 StackExchange 规则，abc.com被替换为example.com并被xyz.com替换为example.net（了解更多）。

blobURL无法跨域访问，解决方法是访问对象postMessage（了解更多）。Blob

在example.com：

const exampleDotNet = window.open('https://example.net');
// TODO wait for example.net to be ready
exampleDotNet.postMessage(pdfFile, 'https://example.net');

在example.net：

window.addEventListener(
    'message',
    ({
        origin,
        data: myBlob
    }) => {
        if(origin === 'https://example.com'){
            // TODO something with myBlob
        }
    }
);