已拦截跨源请求：同源策略禁止读取位于 file:///c:/Users/%E6%9D%8E%E5%AE%B6%E8%B1%AA/Desktop/test/data.json 的远程资源。

        出现这个问题是因为浏览器的同源策略（Same-Origin Policy）限制了从一个源（origin）加载的文档或脚本与另一个源的资源进行交互。同源策略是浏览器的一个安全特性，用于防止恶意脚本访问和修改其他网站的内容。

        在您的例子中，您正在尝试通过 Fetch API 从本地文件系统（file:/// 协议）加载一个 JSON 文件。由于 Fetch API 是基于 HTTP 的，而 file:/// 协议并不是 HTTP，因此浏览器将阻止这种跨源请求。即使您在本地机器上运行代码，浏览器仍然会执行这些安全限制。

        简单来说这个问题是因为你打开了一个本地的文件但是浏览器不支持直接获取本地文件数据，浏览器支持HTTP协议，解决方法：

1.使用本地服务器：

        将您的前端代码和 JSON 数据文件放在本地服务器上运行，而不是直接从文件系统打开。您可以使用像 Node.js 的 http-server、Express 或者 Python 的 SimpleHTTPServer 这样的简单工具来快速搭建一个本地服务器。(前提是你需要安装json-server)，安装和启用方法可以根据安装与启动

2.禁用浏览器的同源策略：

        对于开发和测试目的，您可以在某些浏览器（如 Chrome）中禁用同源策略，但这通常不推荐，因为它会降低安全性。您可以使用命令行标志（如 --disable-web-security）或安装浏览器扩展来禁用它，但这只应在您完全理解潜在风险的情况下进行。

        在大多数情况下，使用本地服务器是最简单和最安全的解决方案。这允许您在开发环境中模拟生产环境的行为，同时遵守浏览器的安全限制。