fetch api：尝试将 data.json 文件中的数据提取到 index.html 文件中

Question

我正在创建一个项目，其中有两个文件index.html和data.json 现在我想将json对象提取到index.html中进行渲染

但是如果我使用 fetch() 方法，我会遇到 cors 错误

有没有办法从data.json获取数据

async fetchData(filename) {
        try {
            const response = await fetch(url);
            const jsonData = await response.json();
            return jsonData;
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    }

Answer 1

您是直接双击打开html文件吗？ （浏览器中的 URL 如下所示：file:///C:/Users/username/project/index.html） 问题是，获取 ./data.json 会访问您的文件系统，由于安全原因，这是被禁止的。如果您使用 Visual Studio Code，您可以安装“live server”插件。安装完毕后，您可以在 vscode 中将项目作为文件夹打开，然后右键单击 index.html 并选择“使用实时服务器打开”。之后，插件应该在新选项卡中打开您的页面，并且 fetch 调用应该可以正常工作，因为该插件正在创建一个为您的项目文件提供服务的静态文件服务器。