fetch api 无法加载，不支持 url 方案“文件”
[英]fetch api cannot load, url scheme 'file' is not supported
问题描述
i tried to use fetch on localhost, but it didn't work.
我尝试在本地主机上使用fetch ，但它没有用。
here is my code:这是我的代码：
<!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 file is in same folder with the script file. hi.txt 文件与脚本文件位于同一文件夹中。
below error is shown in console:以下错误显示在控制台中：
index.html:12 Fetch API cannot load file:///C:/~~~~/hi.txt. URL scheme "file" is not supported.
(~~~) is path (~~~) 是路径
3 个解决方案
解决方案1
16 已采纳 2021-09-11 16:32:46
Since your URL is relative (it's just "hi.txt" ), it's resolved against the URL of the page the code is running in. In your case, that appears to be file:///something — that is, a file you've loaded directly from your file system, not by requesting it from a server.由于您的 URL 是相对的（它只是"hi.txt" ），它是针对运行代码的页面的 URL 进行解析的。在您的情况下，这似乎是file:///something - 也就是说，您的文件'已经直接从您的文件系统加载，而不是通过从服务器请求它。 Chrome doesn't allow fetching from the file scheme. Chrome 不允许从file方案中获取。 The file scheme's origin is null . file方案的来源是null 。 The Chrome team's interpretation of the Same Origin Policy is that no origin, not even itself, should match null . Chrome 团队对同源策略的解释是，任何来源，甚至它本身，都不应该匹配null 。 (A reasonable interpretation in my view, but opinions can vary.) （我认为这是一个合理的解释，但意见可能会有所不同。）
When doing web development, you want to be working through a server process because pages loaded directly from the file system behave differently in several sometimes-subtle ways vs. pages loaded from servers.在进行 Web 开发时，您希望通过服务器进程进行工作，因为直接从文件系统加载的页面与从服务器加载的页面相比，有时在一些微妙的方面表现不同。
There are a couple of ways to do that:有几种方法可以做到这一点：
- Use the features of your IDE, if you use one, and/or extensions to it.使用 IDE 的功能（如果您使用其中之一）和/或它的扩展。 For instance, for VSCode there's the "live server" extension which makes it very easy to run your code from a minimal server.例如，对于 VSCode，有一个“实时服务器”扩展，这使得从最小的服务器运行代码变得非常容易。
- Use an actual web server process running locally.使用在本地运行的实际 Web 服务器进程。 There are simple ones that are easy to install.有一些简单的，易于安装。
- Use one of various "quick start" scaffolding tools that set up simple projects for you, often via
npm(and Node.js), with a command you can use to build and run the project locally in development mode.使用各种“快速启动”脚手架工具之一，通常通过npm（和 Node.js）为您设置简单项目，并使用可用于在开发模式下本地构建和运行项目的命令。
解决方案2
0 2021-12-02 17:36:13
hi you are running your file like this way -you are right clicking on your html file-opening with it browser.嗨，您正在以这种方式运行您的文件-您可以右键单击您的 html 文件-使用它的浏览器打开。 This way you are telling to browser to open your html file from your file location where you have saved it.Check in Your browser url bar you will get something like this C:/xampp/htdocs/xyz.html so this is your local directory file system.这样你就告诉浏览器从你保存它的文件位置打开你的 html 文件。检查你的浏览器 url 栏你会得到像这样的东西 C:/xampp/htdocs/xyz.html 所以这是你的本地目录文件系统。 so now you have to first start your sever such as xampp or whatever server you have installed and then you type this localhost/filename or /subfolder name and / file name if you have stored it in subfolder...and hit enter.inshort you have to query to a server like you does in php file calling.....所以现在你必须首先启动你的服务器，比如 xampp 或你安装的任何服务器，然后输入这个 localhost/filename 或 /subfolder name 和 /file name 如果你已经将它存储在子文件夹中......然后点击 enter.inshort 你必须像在 php 文件调用中那样查询服务器.....
解决方案3
0 2022-06-25 09:27:32
You can just create a local web server (XAMPP) and upload there your hi.txt file.您可以创建一个本地 Web 服务器 (XAMPP) 并在那里上传您的hi.txt文件。 If you did that, replace如果你这样做了，更换
fetch("hi.txt")
with和
fetch("http://127.0.0.1/hi.txt")
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.