Question

我正在创建本地HTML页面，以用作查看我已下载到计算机的视频的界面。该文件不是服务器的一部分，仅存在于我的本地硬盘上。我还将这些视频中的所有元数据保存到一个大的json（ish）文件中（该文件未正确设置为json格式，每一行都是不同的json对象）。我需要将json文件中的数据加载到html页面中，以便访问元数据。

<script>
    $.get('file://database.json', function(data) {
        alert(data);
    });
</script>

但是，正如预期的那样，我收到了跨原点错误：

Access to XMLHttpRequest at 'file:///E:/Videos/database.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

我知道出于安全原因很难解决CORS，但是我正在寻找一种解决方案，该解决方案不需要设置Web服务器，并且可以在大多数浏览器上运行，而无需使用特殊参数启动它们或更改设置。我不想为查看器创建完整的应用程序，因为我对查看器的目标是简单，兼容和易于设计。

是否有办法解决此政策，或者可以使用其他方法将文件加载到本地HTML页面中？

编辑：

我测试了@JasonB的将database.json文件作为脚本加载的想法，它可以工作。但是，要使其正常工作，我必须手动向文件中添加一些行，并正确格式化json。我想知道是否有办法将未格式化的文件加载为脚本并仍然使用其数据？这是我询问有关将文件格式设置为参考的问题： Batch File: Append line to file, keeping it wrapped

Answer 1

只需将您的内容放入.js文件并像其他任何javascript文件一样将其链接，浏览器就不会有任何问题。

Answer 2

浏览器将阻止您通过file://进行请求，因为这是潜在的安全问题，即使文件是通过file://加载的。

一种替代方法是使用Chrome，Firefox，Opera和Edge中可用的非标准FileSystem API。它使您可以存储文件并再次检索它们。我有a running sample web app here和the code is here。

请注意，这不会立即可用，因为“ file：//”起源通常会导致DOMExceptions。对于Chrome，您可以使用--allow-file-accom-files标志启动浏览器，以允许从本地HTML文件访问FileSystem API。

本地HTML文件：由于跨源错误而无法读取本地文本文件

2 个答案: