fetch api 无法加载，url 方案 'file' 不受支持

Question

我尝试在本地主机上使用 fetch，但没有成功。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        fetch("hi.txt").then(function(response){
            response.text().then(function(text){
                alert(text)
            })
        })
    </script>
</body>
</html>

hi.txt 文件与脚本文件位于同一文件夹中。

控制台中显示以下错误：

index.html:12 Fetch API cannot load file:///C:/~~~~/hi.txt. URL scheme "file" is not supported.

(~~~) 是路径

Answer 1

因为你的 URL 是相对的（它只是 "hi.txt"），它是根据代码所在页面的 URL 解析的运行ning。在你的情况下，这似乎是 file:///something — 也就是说，您直接从文件系统加载的文件，而不是通过从服务器请求加载的文件。 Chrome 不允许从 file 方案中获取。 file 方案的起源是 null。 Chrome 团队对 Same Origin Policy 的解释是，没有来源，甚至它本身，都不应匹配 null。（在我看来是一个合理的解释，但意见可能会有所不同。）

在进行 Web 开发时，您希望通过服务器进程进行工作，因为直接从文件系统加载的页面与从服务器加载的页面在一些有时微妙的方式上表现不同。

有几种方法可以做到这一点：

使用 IDE 的功能，如果您使用 and/or 扩展功能。例如，对于 VSCode，有一个“实时服务器”扩展，这使得从最小服务器运行您的代码变得非常容易。
在本地使用实际的 Web 服务器进程运行ning。有简单的，安装方便。
通常通过 npm（和 Node.js）使用可以为您设置简单项目的各种“快速启动”脚手架工具之一，并使用一个命令来构建和运行本地项目处于开发模式。

Answer 2

你好运行你的文件是这样的 - 您正在右键单击您的 html 文件 - 使用 it 浏览器打开。这样你就告诉浏览器从你保存 it.Check 的文件位置打开你的 html 文件在你的浏览器 url 栏你会得到这样的东西 C:/xampp/htdocs/xyz.html 所以这是你的本地目录文件系统。所以现在你必须首先启动你的服务器，比如 xampp 或者你安装的任何服务器，然后你输入这个 localhost/filename 或者 /subfolder name 和 / file name 如果你已经将它存储在子文件夹中......然后点击 enter.inshort 你必须像在 php 文件调用中那样查询服务器.....

fetch api 无法加载，url 方案 'file' 不受支持

fetch api cannot load, url scheme 'file' is not supported

javascript

asynchronous

es6-promise

fetch-api