javascript - 为什么允许某些 `file://` 提取调用而其他的是 'Cross-Origin Request Blocked' ？

Question

我刚开始学习javascript，所以请多多包涵。

我有两个 html 页面，比如 page1.html 和 page2.html。两个页面上都有两个按钮，“下一个”和“上一个”。这个想法是打开序列中的下一页或上一页。我通过将 window.location.href 设置为新的 file:// url 打开新页面。当然，当它尝试访问页面0 或页面3 时，浏览器会显示找不到文件。

所以我决定尝试使用 fetch 并仅在 response.ok 为 true 时打开新页面。这是我处理 button.onclick 的函数:

fetch(url).then(function(response) {
    if (response.ok) {
        window.location.href = url;
    }
    else {
        alert("This is the last page.");
    }
});

当页面存在时(它打开页面)，它按我预期的方式工作。但是当它不显示时，控制台会显示 1 个警告和 1 个错误(并且根本不会更改页面，也不会触发 alert):

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///path/to/page3.html. (Reason: CORS request not http).
TypeError: NetworkError when attempting to fetch resource.

我四处搜索，发现非 http 请求出于安全原因被阻止(不允许网页随心所欲地访问本地文件)。

让我感到困惑的是，即使文件存在(page1 或 page2)，它仍然是一个非 http 请求，但它仍然有效。为什么只有当文件不存在时才被阻止？为什么我会同时收到 NetworkError？

Answer 1

fetch(无论如何在浏览器中)有 this to say关于文件: URLs:

For now, unfortunate as it is, file URLs are left as an exercise for the reader.

When in doubt, return a network error.

通常，fetch 不会成功获取 file: URL。遗憾的是，在 Firefox 上，如果正在获取的文件存在，它就会成功，但如果不存在，则会抛出网络错误。 (我想这是有道理的，它不能返回 HTTP 状态代码；它没有使用 HTTP。)在 Chrome 和 Edge 上，无论文件是否存在，它总是失败。在某些浏览器(如 Chrome)中，较旧的 XMLHttpRequest 也不会(但在其他浏览器(如 Firefox)中，它会)。

fetch/XMLHttpRequest 和设置页面的href 之间的主要区别在于，在前一种情况下，页面 A 上的代码是能够阅读页面B的内容；但在后一种情况下，它不能 — 它可以转到页面 B，但无法阅读页面 B 的内容。页面 A 被页面 B 替换。

如果 XMLHttpRequest 在我们现在生活的安全环境中被标准化，我怀疑它也会明确禁止访问 file: URL。

---

由于 Firefox 将文件不存在视为 NetworkError，因此您的代码(仅适用于 Firefox)可能是:

// With file: URLs, this ONLY works in Firefox
fetch(url)
.then(function(response) {
    if (!response.ok) {
        throw new Error("HTTP status " + response.status);
    }
})
.then(function() {
    window.location.href = url;
})
.catch(error => {
    alert("This is the last page.");
});

或者也许:

fetch(url)
.then(function(response) {
    return response.ok;
})
.catch(function() {
    return false;
})
.then(function(flag) {
    if (flag) {
        window.location.href = url;
    } else {
        alert("This is the last page.");
    }
});

你可以在那里使用箭头函数。我没有，因为你没有，但是:

fetch(url)
.then(response => response.ok)
.catch(() => false)
.then(flag => {
    if (flag) {
        window.location.href = url;
    } else {
        alert("This is the last page.");
    }
});