获取 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.

(~~~) 是路径

原文由 UiJin 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.3k
2 个回答

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

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

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

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

原文由 T.J. Crowder 发布,翻译遵循 CC BY-SA 4.0 许可协议

您可以只创建一个本地网络服务器 (XAMPP) 并在那里上传您的 hi.txt 文件。如果你这样做了,更换

fetch("hi.txt")

fetch("http://127.0.0.1/hi.txt")

原文由 callRemote 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题