本文详解在本地开发环境下通过 fetch() 读取同目录 data.json 时触发 CORS 错误的根本原因，并提供三种切实可行的解决方案，重点推荐轻量级本地服务器方案。
本文详解在本地开发环境下通过 `fetch()` 读取同目录 `data.json` 时触发 cors 错误的根本原因，并提供三种切实可行的解决方案，重点推荐轻量级本地服务器方案。
在前端开发初期，许多开发者会尝试直接用 file:// 协议打开 index.html 并通过 fetch('./data.json') 加载本地 JSON 数据。然而，现代浏览器（Chrome、Edge、Firefox 等）出于安全考虑，对 file:// 协议下的跨文件资源请求默认启用严格限制——即使 data.json 与 index.html 处于同一文件夹，fetch 也会被拦截并抛出类似 Blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https 的错误。
这是因为 file:// 不属于受信任的网络协议（如 http:// 或 https://），浏览器将其视为“无源”（opaque origin），禁止发起任何非简单请求（包括 fetch 读取本地 JSON），这与 CORS 无关，而是更底层的 "Origin isolation" 安全策略。
✅ 正确做法：使用本地 HTTP 服务器
最规范、零兼容性风险的方案是启动一个极简 HTTP 服务。推荐两种零配置方式：
-
使用
npx http-server（需已安装 Node.js）：# 在项目根目录执行（含 index.html 和 data.json） npx http-server -c-1 -o
-c-1禁用缓存，-o自动打开浏览器。此时访问http://127.0.0.1:8080/，fetch('./data.json')将正常工作。 使用 VS Code 插件 Live Server（图形化操作）：右键
index.html→ “Open with Live Server”，自动启动服务并热重载。
⚠️ 其他方案的局限性需谨慎评估：
- ❌ 浏览器启动参数（如 Chrome 的
--disable-web-security）仅限临时调试，存在严重安全隐患，且新版 Chrome 已限制该参数在常规窗口生效； - ❌ CORS 解除插件（如 "CORS Unblocked"）可能干扰真实线上行为，且不适用于所有请求场景；
- ❌ 切换浏览器（如旧版 Firefox）无法保证长期可用，违背现代 Web 开发最佳实践。
? 补充：修复代码中的小错误
您提供的 fetchData 函数中变量名不一致（参数为 filename，但内部使用未定义的 url）。修正后的健壮版本如下：
async function fetchData(filename) {
try {
const response = await fetch(filename); // ✅ 使用传入的 filename
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
const jsonData = await response.json();
return jsonData;
} catch (error) {
console.error('Error fetching or parsing JSON:', error);
throw error; // 便于上层处理
}
}
// 调用示例（确保运行在 HTTP 服务下）
fetchData('./data.json')
.then(data => console.log('Loaded:', data))
.catch(err => alert('加载失败，请检查服务是否启动'));
总结：永远不要依赖 file:// 协议进行 AJAX 开发。本地服务器不是“额外负担”，而是现代前端开发的标准起点——它消除了协议限制、支持模块化导入、适配构建工具，且只需一条命令即可开启。从今天起，把 npx http-server 或 Live Server 当作 HTML+JSON 项目的默认启动方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
