为什么某些“ file：//”提取调用被允许，而另一些则被“跨域请求阻止”？

Question

我刚刚开始学习JavaScript，所以请多多包涵。我有两个html页面，例如page1.html和page2.html。两个页面上都有两个按钮，“下一页”和“上一页”。想法是打开序列中的下一页或上一页。我通过设置window.location.href新的file://URL来打开新页面。当然，除了尝试访问页面0或页面3时，浏览器会显示找不到文件。因此，我决定fetch仅在response.okis是的情况下尝试使用和打开新页面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请求（不允许网页随心所欲地访问本地文件）。令我感到困惑的是，即使文件存在（第1页或第2页），它仍然是非HTTP请求，但仍然有效。为什么仅在文件不存在时才阻止它？为什么我要NetworkError和它在一起？

Answer 1

fetch（在浏览器中，无论如何）有这样一段话约file:网址：

目前，不幸的是，文件URL留给读者练习。

如有疑问，请返回网络错误。

通常，URLfetch不会成功file:。可悲的是，似乎在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.");

    }

});