本地javascript無法打開本地文件

Question

請告訴我，為什么本地javascript無法打開本地文件？ 我正在嘗試創建一個將在本地文件系統上的本地計算機上運行的簡單javascript / html應用程序。 這個應用程式嘗試使用不同的方法讀取設定檔（json），但出現下列錯誤（Chrome）：

1. 如果是XMLHttpRequest，則方法open("GET", filename, true)會引發異常：

   XMLHttpRequest無法加載file：/// bla-bla-bla。 跨源請求僅支持以下協議方案：http，數據，chrome，chrome擴展名，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" }); 我的File對象大小為零，完全沒有錯誤。 然后，FileReader返回一個空結果。

所以，我的問題是：為什么它是“跨源”的？ 這些文件存儲在同一目錄中！ 以及如何從運行腳本的相同來源/目錄打開本地文件？ 請幫忙。

PS：是的，我知道--allow-file-access-from-files但是我需要由客戶運行。

Answer 1

為什么是“跨源”？ 這些文件存儲在同一目錄中！

因為Chrome認為所有 file://網址都是相互交叉的。

以及如何從運行腳本的相同來源/目錄打開本地文件？

從Chrome瀏覽器？ 你不知道 除非您完全使用命令行選項禁用了CORS，否則這不是一個好主意，因為忘記設置該命令行選項並上網瀏覽是很容易的事情，這會讓您敞開大門，利用這些漏洞在網上賺錢實際上您已禁用網絡安全性）。

其他瀏覽器可能會以不同方式對待原產null 。

而是運行本地Web服務器，並通過本地Web服務器使文件可用。 然后，您可以訪問它們，因為它將是相同來源的http URL，而不是file URL。 或使用可讓您使用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;

設置稍微復雜一些，但是一旦完成，就完全消除了跨域問題。