fetch api 无法加载，不支持 url 方案“文件”
Posted
技术标签:
【中文标题】fetch api 无法加载，不支持 url 方案“文件”【英文标题】：fetch api cannot load, url scheme 'file' is not supported 【发布时间】：2021-11-07 16:31:19 【问题描述】：我尝试在本地主机上使用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.
(~~~) 是路径
【问题讨论】：
欢迎使用 ***，请在提问前阅读指南 【参考方案1】：由于您的 URL 是相对的（它只是 "hi.txt"），它会针对运行代码的页面的 URL 进行解析。在您的情况下，这似乎是 file:///something - 即您拥有的文件直接从您的文件系统加载，而不是通过从服务器请求它。 Chrome 不允许从 file 方案中获取。 file 方案的来源是 null。 Chrome 团队对Same Origin Policy 的解释是，任何来源，甚至其本身，都不应该与null 匹配。 （在我看来这是一个合理的解释，但意见可能会有所不同。）
在进行 Web 开发时，您希望通过服务器进程进行工作，因为直接从文件系统加载的页面与从服务器加载的页面相比，有时在一些微妙的方面表现不同。
有几种方法可以做到这一点：
使用 IDE 的功能（如果您使用其中之一）和/或对它的扩展。例如，对于 VSCode，有一个“实时服务器”扩展，这使得从最小的服务器运行代码变得非常容易。 使用本地运行的实际 Web 服务器进程。有一些很容易安装的。 使用可以为您设置简单项目的各种“快速启动”脚手架工具之一，通常通过npm（和 Node.js）使用可用于在开发模式下在本地构建和运行项目的命令。
【讨论】：
感谢您的好评！！！！我找到了方法，我在 chrome 浏览器中执行此过程。 （制作html文件并在chrome中查看）。但是chrome浏览器不能直接为你的文件（'css.txt'）执行fetch func！ （可能是因为安全问题）例如。 css.txt, index.html 在同一个文件夹中，我尝试查看涉及 fetch func（尝试访问 css.txt）的 html 文件，chrome 浏览器无法加载 Fetch API ！！！所以我尝试制作节点js服务器，并上传css.txt。那么我的问题就解决了！！再次感谢您的回复。有美好的一天，希望有美好的一天！ 嗨，我正在尝试做一个学校项目，并且是 HTML 和 javascript 以及所有内容的完整初学者。我遇到了同样的问题，所以你介意解释一下如何解决它，即我可以使用什么网络服务器？我的一位老师（没有计算/IT 知识）也需要能够轻松访问它，以便她可以（来自用户 pov）给我反馈，我不想让她安装东西。【参考方案2】：您好，您正在以这种方式运行您的文件 - 你右键点击你的 html 文件——用它的浏览器打开。这样你就告诉浏览器从你保存它的文件位置打开你的 html 文件。检查你的浏览器 url 栏你会得到像这样的东西 C:/xampp/htdocs/xyz.html 所以这是你的本地目录文件系统。所以现在你必须首先启动你的服务器，比如 xampp 或你安装的任何服务器，然后输入这个 localhost/filename 或 /subfolder name 和 /file name 如果你已经将它存储在子文件夹中......然后点击 enter.inshort 你必须像在 php 文件调用中那样查询服务器.....
【讨论】：
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。以上是关于fetch api 无法加载，不支持 url 方案“文件”的主要内容，如果未能解决你的问题，请参考以下文章
Fetch API 无法加载 file:///C:/Users/Jack/Desktop/Books_H/book-site/public/api/books。对于 CORS 请求，URL 方案必须是
无法使用 Fetch API 从 localhost 加载 Deezer API 资源
Fetch API 无法加载 webpack://... 错误