本文详解解决本地开发时通过 fetch 读取 data.json 遇到 CORS 错误的根本原因，并提供三种切实可行的替代方案，包括轻量级本地服务器配置、浏览器扩展辅助及注意事项，帮助开发者绕过 file:// 协议限制，实现数据正常加载。
本文详解解决本地开发时通过 fetch 读取 data.json 遇到 cors 错误的根本原因，并提供三种切实可行的替代方案，包括轻量级本地服务器配置、浏览器扩展辅助及注意事项，帮助开发者绕去 file:// 协议限制，实现数据正常加载。
在本地开发中，直接双击打开 index.html 并使用 fetch('./data.json') 加载同目录下的 JSON 文件，浏览器会因安全策略拒绝请求——这不是代码错误，而是现代浏览器（Chrome、Edge、Firefox 等）对 file:// 协议强制启用的 CORS 限制：它将每个本地文件视为独立源，禁止跨源（此处实为“跨协议”）资源获取。
你提供的异步函数逻辑本身正确：
async function fetchData(filename) {
try {
const response = await fetch(filename); // ✅ 路径应为 './data.json'
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const jsonData = await response.json();
return jsonData;
} catch (error) {
console.error('Error fetching data:', error);
}
}
但关键在于执行环境：仅当页面通过 http:// 或 https:// 协议加载（如 http://localhost:3000/index.html）时，fetch 才能正常访问同源 JSON 文件。
✅ 推荐方案：启动轻量本地服务器（最可靠、生产就绪）
无需安装全局服务，借助 Node.js 内置工具即可快速启动：
- 全局安装
http-server（一次）：npm install -g http-server
- 在项目根目录（含
index.html和data.json）运行：http-server -c-1 -o
-
-c-1禁用缓存，确保实时读取最新 JSON； -
-o自动在浏览器中打开http://localhost:8080。
-
此时 fetch('./data.json') 将完全正常工作，且无 CORS 报错。
⚠️ 不推荐的临时方案（仅限调试，勿用于协作或交付）
- 浏览器扩展：如 Chrome 的 CORS Unblocked，可临时禁用 CORS 检查，但每次更新或换设备需重配，且存在安全风险；
-
启动参数绕过（已逐步弃用）：如
chrome --disable-web-security --user-data-dir=/tmp，不仅操作复杂，新版 Chrome 已限制该方式，且会禁用全部安全机制，强烈不建议。
? 重要提醒
-
data.json必须与index.html同域（即同服务器路径），相对路径如'./data.json'或'/data.json'均可； - 确保 JSON 文件格式合法（无尾逗号、字符串使用双引号）；
- 生产环境务必部署在 HTTP(S) 服务器上，
file://方式永远不可用于正式发布。
综上，启动本地 HTTP 服务器不是“额外负担”，而是前端开发的标准实践。它不仅解决 CORS 问题，还支持模块导入、Service Worker、HTTPS 测试等核心能力。养成 npx http-server 或 VS Code 插件（如 Live Server）一键启服的习惯，将大幅提升开发效率与代码健壮性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
