由于获取 api 错误，无法从 JSON 文件中获取我的数据答案

【问题标题】：Unable to fetch my data from JSON file due to fetch api error由于获取 api 错误，无法从 JSON 文件中获取我的数据
【发布时间】：2020-12-11 21:28:36
【问题描述】：

所以我制作了一个表格，其中包含来自 json 文件的数据。上次我使用它时它起作用了，大约一周后我又回来了这个错误：

script.js:5 Fetch API 无法加载 file:///（文件位置）。对于 CORS 请求，URL 方案必须是“http”或“https”。

我的 script.js:5 是 fetch('data.json')

这就是我将 json 数据放入我的 javascript 文件的方式：

fetch('data.json')
.then(function (response) {
    return response.json();
})
.then(function (data) {
    generateTable(data);
})
.catch(function (err) {
    console.log('error: ' + err);
});

据我了解，我需要我的 json 文件来自 url，有没有简单的方法可以做到这一点？或者，还有其他方法可以将我的数据导入我的 javascript 程序吗？

【问题讨论】：

文件必须存储在某个地方，某个位置，一个你知道的地址，这个文件到底在哪里？
您必须从网络服务器提供您的应用程序，而不是直接从文件系统打开它
您的全部问题是您不能在file:// 协议中使用ajax (fetch())。您需要实现一个 localhost 服务器并使用它来运行您的应用程序。有许多简单的方法可以让 localhost 服务器在您的机器上运行
文件在一个位置，我只是不想把位置放在帖子里。我想我会使用本地服务器。谢谢

标签： javascript json fetch-api

【解决方案1】：

出于测试目的，您可以将 json 文件上传到支持 txt 文件直接链接的服务器，file.io 和 filebin.net 可以这样做，但这不是一个好主意。

您始终可以安装 Xamp 或 Mamp 等应用程序，为您提供本地开发环境。

如果您只是在开发一个前端项目并且不想要像 Xamp 这样的全功能应用程序，那么您可以使用括号编辑器，让您可以使用 http 协议在 localhost 中进行预览。

当然，以上所有建议都是针对您网站的开发阶段的，如果是生产级网站，您应该将文件上传到服务器。

【讨论】：

谢谢，我想我会尝试使用本地主机/服务器