Question

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

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

XMLHttpRequest无法加载file：/// bla-bla-bla。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。
如果document.createElement("iframe").src=filename我有另一个例外：

VM596：1未捕获的DOMException：无法读取＆＃39; contentDocument＆＃39;属性来自＆＃39; HTMLIFrameElement＆＃39;：使用origin＆＃34; null＆＃34;阻止了一个框架从访问跨源框架。＆＃34;
如果是var f=new File([], filename, { type: "text/plain" });，我的File对象的大小为零，完全没有错误。 FileReader然后返回一个空结果。

所以，我的问题是：为什么它和＃34;交叉起源＆＃34;？这些文件存储在同一目录中！我如何从运行脚本的同一源/目录中打开本地文件？请帮忙。

P.S。：是的，我知道--allow-file-access-from-files，但我需要由客户来管理。

Answer 1

为什么它是＆＃34;来源＆＃34;？这些文件存储在同一目录中！

因为Chrome会将所有 file://网址视为彼此的原始网址。

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

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

其他浏览器可能会对来源null采取不同的处理方式。

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

Answer 2

您可以执行以下操作来阅读.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的导入。

Answer 3

参加这个聚会有点晚了，但是我遇到了同样的问题，这就是我如何解决这个问题

创建这样的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;

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

本地javascript无法打开本地文件

3 个答案: