JavaScript:如何读取本地文件（特别是json文件）？

Question

我的问题很简单:我想读取一个依赖于前端侧而不是服务器的配置json文件。文件名和路径硬编码在JS文件中。我不是从一些文件对话框中获取它的名字，就像在许多例子中一样。

我还尝试了一些使用fetch的建议，比如:

fetch('./data/properties.json')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.log(error));

但我总是犯错误

exh.js:30 Fetch API无法加载文件:///c:/users/myusername/webappsprojects/bbsimfe/data/properties.json。对于CORS请求，URL方案必须是“HTTP”或“HTTPS”。

我还安装了CORS Chrome扩展，并打开了它=>；帮不上忙。

我还试图了解我是否可以使用FileReader。例如:

var fr = new FileReader();
fr.readAsText(new File([""], "./data/properties.json"));
fr.onload = function(evt){
    alert(fr.result);
 }

但这不会返回任何结果。

另外，我没有使用Node.js，所以不能使用require（）；

请协助。谢谢

Answer 1

出于安全考虑，fetch对fileURL不起作用，因此在浏览器中打开文件将不起作用。您应该设置一个本地测试服务器，以便XHR请求能够正常工作。一些选项包括在文件所在的目录中运行python-mhttp.server8080，然后在浏览器中导航到http://localhost:8080，或者使用诸如VSCode的live server插件之类的插件。