URL.createObjectURL() 创建的 Blob URL 无法访问

Blob URL 通常是通过调用 URL.createObjectURL() 方法创建的，它可以用来访问 JavaScript 中的 Blob 对象（比如从服务器上获取的二进制数据）。但是，有些情况下会出现无法访问 Blob URL 的问题，可能是因为以下几个原因：

1. 跨域问题：如果 Blob URL 所指向的资源（比如图片、视频等）与当前页面不在同一个域名下，那么浏览器就可能会拦截请求，从而无法访问该资源。

2. 安全问题：如果浏览器认为 Blob URL 所指向的资源可能存在安全风险（比如包含恶意脚本），那么它就会禁止访问该资源。

3. 生命周期问题：Blob URL 所指向的资源可能已经被销毁或者过期了，导致浏览器无法访问该资源。

如果您遇到了无法访问 Blob URL 的问题，建议您检查以上几个方面是否存在问题。如果以上都没有问题，您也可以尝试使用其他方法来获取和处理资源，比如使用 XMLHttpRequest 或者 fetch API 从服务器上获取资源，并将其转换为 Blob 对象。

相关问题

let fileURL = window.URL.createObjectURL(blob) window.open(fileURL); 怎么让文件能够在浏览器里面预览

要在浏览器中预览文件，你可以使用适当的媒体类型和浏览器支持的预览方法。以下是一些常见的文件类型和相应的预览方法示例：

1. 图片文件（如JPEG、PNG、GIF）：可以直接在浏览器中显示。你可以创建一个`<img>`元素，并将`fileURL`作为其`src`属性值。

const img = document.createElement('img');
img.src = fileURL;
document.body.appendChild(img);

2. 文本文件（如txt、csv、log）：可以将文件内容显示在`<pre>`或`<textarea>`元素中。

fetch(fileURL)
  .then(response => response.text())
  .then(text => {
    const pre = document.createElement('pre');
    pre.textContent = text;
    document.body.appendChild(pre);
  });

3. PDF文件：可以使用PDF.js库来呈现PDF文件。首先，确保在你的HTML文件中引入了PDF.js库，然后使用以下代码：

const pdfViewer = document.createElement('iframe');
pdfViewer.src = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${fileURL}`;
pdfViewer.style.width = '100%';
pdfViewer.style.height = '600px';
document.body.appendChild(pdfViewer);

这些只是一些常见的文件类型的预览方法示例，具体取决于你要预览的文件类型和浏览器支持的功能。请根据你的需求和文件类型选择适当的方法。

// link.href = window.URL.createObjectURL(blob) 主流浏览器已不支持此种方式，通过下面代码处理

`window.URL.createObjectURL(blob)` 这种创建 URL 对象的方式来处理 Blob 对象，在早期的一些浏览器中确实曾被广泛使用，用于提供文件的预览或者下载链接。然而，随着现代浏览器对安全性和 API 的更新，这种直接操作 URL 对象的方式已经被推荐弃用。

从 HTML5开始，特别是为了更好地管理跨源资源共享 (CORS)，许多现代浏览器不再支持或限制了这种方法。取而代之的是，推荐使用 `URL.createObjectURL()` 结合 `fetch`、`FileReader` 或者 `Blob URLs API` 中的其他方法，比如 `URL.prototype.webkitCreateObjectURL()`（仅限于 WebKit 内核的浏览器，如 Safari）或者 `URL.createObjectURL() + .then()` 来处理 blob 资源，同时确保满足同源策略的要求。

替代的代码示例可能会像这样：

const reader = new FileReader();
reader.onload = function(event) {
  const url = event.target.result; // 使用新的 URL API 替换 createObjectURL
  // 现在你可以将 url 分享给用户或者作为下载链接使用
};
reader.readAsDataURL(blob); // 或者读取为数据 URL 格式

或者在某些情况下，可以使用 `fetch` 直接获取：

fetch(URL.createObjectURL(blob))
  .then(response => response.blob())
  .then(blob => URL.createObjectURL(blob));