本地javascript无法打开本地文件

Question

请告诉我，为什么本地 javascript 无法打开本地文件？ 我正在尝试创建一个简单的 javascript/html 应用程序，该应用程序应从本地文件系统在本地计算机上运行。此应用正在尝试使用不同的方法读取配置文件 (json)，但出现以下错误 (Chrome)：

1. 如果是XMLHttpRequest，方法open("GET", filename, true)会抛出异常：

   XMLHttpRequest 无法加载 file:///bla-bla-bla。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。

2. 如果是document.createElement("iframe").src=filename，我还有另一个例外：

   VM596:1 未捕获的 DOMException：无法从 'HTMLIFrameElement' 读取 'contentDocument' 属性：阻止具有源“null”的框架访问跨域框架。”

3. 在var f=new File([], filename, { type: "text/plain" }); 的情况下，我得到了大小为零且完全没有错误的文件对象。然后 FileReader 返回一个空结果。

所以，我的问题是： 为什么是“跨域”？这些文件存储在同一目录中！ 以及如何从运行脚本的同一源/目录打开本地文件？ 请帮忙。

P.S.：是的，我知道 --allow-file-access-from-files，但我需要由客户运行它。

Answer 1

这个聚会有点晚了，但我遇到了同样的问题，这就是我解决问题的方法

创建一个这样的js模板：

template.js

(function(global, factory) {
    "use strict";
    factory(global);
})(typeof window !== "undefined" ? window : this, function(window) {
    "use strict";
    var myObjectJson = '<JSONREPLACE>';
    var myObject = JSON.parse(myObjectJson);
    window.myObject = myObject;
});

然后，让您的 json 用您的程序替换标签，该程序可以生成导出的 js 本身，或者创建一个批处理脚本文件来为您执行此操作。我正在使用 C#，所以我只是直接从那里构建模板。如果您正在使用的语言是半体面的，您应该能够生成和导出您的文件。

确保您使用的是缩小的 json 字符串。

然后像使用 jQuery 一样使用生成的文件

<script src="generated.js"></script>

并使用

访问您的对象

window.myObject;

设置起来稍微复杂一些，但是一旦设置好，就完全消除了跨域问题。

Answer 2

为什么是“跨域”？这些文件存放在同一个目录下！

因为 Chrome 认为 所有 file:// URL 是相互跨域的。

如何从运行脚本的同一源/目录打开本地文件？

来自 Chrome？你没有。除非您使用命令行选项完全禁用 CORS（这是一个坏主意，因为很容易忘记您已经设置了该命令行选项并去网上冲浪，从而让自己对利用事实上你已经禁用了网络安全）。

其他浏览器可能会以不同方式对待来源null。

相反，运行本地 Web 服务器并通过本地 Web 服务器使文件可用。然后您可以访问它们，因为它将是同源 http URL，而不是 file URL。或者使用十几个框架中的任何一个，让你用 JavaScript（而不是使用浏览器）编写应用程序。或者提供文件的简单 NodeJS 脚本（大约 10 行长）。等等。

Answer 3

读取 .json 文件的方法是将其声明为 .js。

data.js

var data = `{"value1": 10, "value2": "hello"}`

index.html

<script src="data.js"></script>

<script>
  console.log(JSON.parse(data))
</script>

这将打印出来

Object {value1: 10, value2: "hello"}

它们必须在同一个目录中，否则你必须更改 data.js 的导入。