如何使用 javascript 读取本地 json 文件？答案

【问题标题】：How to read a local json file using javascript?如何使用 javascript 读取本地 json 文件？
【发布时间】：2016-10-02 17:19:39
【问题描述】：

我想最好使用 JS/jQuery 从本地的 JSON 文件加载数据。

我知道至少有 10 个关于 SO 的问题具有相同的答案。

我不想要那些。在所有这些答案中，我得到一个“jquery.min.js:4 XMLHttpRequest cannot load file:///C:/Users/.../js.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.”

请建议我解决此问题。如果您的建议是设置服务器并在其中托管文件然后使用它，请帮我做吗？

欢迎任何可能的工作建议（除了使用脚本标签的旧添加 json 等）。谢谢。

【问题讨论】：

本地开发时运行本地服务器。
使用<input type=file>并让用户选择文件
XAMPP 应该对本地服务器有帮助，如果在 Windows 上的话。
或者节点或者php或者IIS。你可以用一个标志让 Chrome 忽略它，但是在文件协议之外运行代码有不同的限制。
设置服务器后，程序是什么？有我可以遵循的指南吗？

标签： javascript jquery json cross-domain

【解决方案1】：

使用 JSON 服务器 https://github.com/typicode/json-server 运行本地 JSON 服务器，而不是直接访问磁盘。

【讨论】：

感谢您，但仍在寻找 js/jQuery 解决方案。（可能没有包添加）
它是一个JS解决方案。当有人给你答案时，至少做一些研究。如果您仅仅因为您不理解而忽略有效答案，我认为您不会从该线程中得到任何东西。您正在尝试访问本地 JSON，方法是设置本地 JSON 服务器。我建议的那个库是你可以设置的最简单的 JSON 服务器。
@Vlad 她不想要额外的包，也没有必要使用节点。
@fsacer 是的。谢谢。

【解决方案2】：

您正在向本地文件系统发出 http 请求，这是不可能的。

使用文件 API 检查对 HTML5 的有限支持，但我仍然怀疑它是您想要的。

http://www.html5rocks.com/en/tutorials/file/dndfiles/

【讨论】：

我愿意运行本地服务器，我只是想知道怎么做，有没有指南？
这是一个相当大的问题，但如果在 Windows 上查看 IIS (iis.net)，否则查看 Tomcat (tomcat.apache.org)。现在这些是 Web 服务器，因此它需要掌握多种技术的知识。您可以查看的纯 JavaScript 堆栈是 Node.js (nodejs.org/en/about)，然后您可以避免在 Web 服务器上运行完整。

【解决方案3】：

您应该使用本地网络服务器，例如 XAMPP/LAMP/MAMP 或 IIS/Apache。一个应该有帮助的相关问题是here。如果您真的只想要文件系统，另一种可能有效的解决方案是使用 iframe 和 HTML5 FileSystem API。

编辑： 设置 XAMPP 时，将文件放入 htdocs 后，您可能需要设置 header Access-Control-Allow-Origin *。这可以通过将其放入 htdocs 目录中的 .htaccess 文件中来实现：

Header set Access-Control-Allow-Origin "*"

【讨论】：

@Emily 尝试在 .htaccess 中进行设置