javascript - 使用本地计算机上的 js/html 文件读取本地文本文件

Question

我在一个单独的文件中使用 JavaScript 构建了一个简单的 html 页面，按下按钮时调用。

我已经在chrome中打开了html文件，路径类似于:file:///home/tom/projects/index.html

JavaScript 需要使用硬编码路径读取位于同一目录中的 JSON 文件 (file:///home/tom/projects/mydata.json)。

我真的很难做到这一点。据我了解，这是因为我正在使用客户端 js(这意味着我无法使用 fs 库)，这限制了我的选择。

根据问题here ，如果我使用格式为 file:///home/to.... 的 URL，则无法加载文件，因为它给出错误:

Cross origin requests are only supported for protocol schemes: HTTP, data, chrome, chrome-extension, https.

如果我启动一个 HTTP 服务器，正如答案所示，我可以使用服务器端模块，但如果可能的话我想避免这种情况。

我注意到许多答案都建议使用类似 this 的对话框:

var selectedFile = document.getElementById('input').files[0];
function readFile (file_path) {       
    var reader = new FileReader();
    reader.readAsText(file_path);
    console.log(reader.substring(0, 100));
 };

但我无法使用以下形式的路径来实现此操作:file:///home/tom/projects/mydata.json

有没有办法使用客户端 JavaScript 从 file:///home/to.... 格式 URL 加载 .json 文件，并使用硬编码路径(即不询问用户从选择框中选择文件)？

Answer 1

这是一个故意的安全限制，旨在阻止用户获得并打开 HTML 页面，然后尝试读取其磁盘。

在网络服务器中运行您的页面(正如该问题所建议的)，然后您可以使用 JavaScript 从 URL 加载 JSON(例如 http://localhost/projects/mydata.json) ，或者使用服务器端语言来获取它并在渲染的 HTML 中显示它。无论哪种方式都会起作用，第一种方式可能更简单并且最接近您现在所拥有的。

按照预期的方式从 HTTP 服务器提供 HTML 页面总是要好得多。