javascript - fetch api 无法加载,不支持 url 方案“文件”
问题描述
我试图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.
(~~~) 是路径
解决方案
由于您的 URL 是相对的(它只是"hi.txt"
),因此它是针对运行代码的页面的 URL 进行解析的。在您的情况下,这似乎是file:///something
- 即您直接从文件系统加载的文件,而不是通过从服务器请求它。Chrome 不允许从该file
方案中获取。该file
方案的起源是null
. Chrome 团队对同源政策的解释是,任何来源,甚至其本身,都不应该匹配null
。(我认为这是一个合理的解释,但意见可能会有所不同。)
在进行 Web 开发时,您希望通过服务器进程进行工作,因为直接从文件系统加载的页面与从服务器加载的页面在一些有时微妙的方面表现不同。
有几种方法可以做到这一点:
- 使用 IDE 的功能(如果您使用其中之一)和/或它的扩展。例如,对于 VSCode,有一个“实时服务器”扩展,这使得从最小的服务器运行代码变得非常容易。
- 使用在本地运行的实际 Web 服务器进程。有一些简单的,易于安装。
- 使用各种“快速启动”脚手架工具之一为您设置简单的项目,通常通过
npm
(和 Node.js),您可以使用命令在开发模式下在本地构建和运行项目。
推荐阅读
- python - 在 Windows 平台上使用 pstats 和 graphviz 的 dot.exe 运行 python profiler 的 Linux 命令等效
- pytorch - PyTorch 在调用 zero_ 方法时显示错误“'NoneType' object has no attribute 'zero_'”
- javascript - 使用反应路由器。如何重定向到组件并设置初始状态?
- javascript - 我无法以角度将动态创建的材料输入字符串插入网页
- node.js - tsconfig 在节点 14 的 vscode 中启用智能感知
- javascript - 超出范围的函数调用
- google-apps-script - 如何为通过 Google 脚本创建的自动填充中添加的每个公式创建 2 秒的暂停?
- angular - 如何在标签内的同一个 *ngIf 上设置多个条件?
- c# - 在c#中设置基类的属性
- apache-kafka - 如何将kafka消息下载到文件中