fetch() 不必须走网络请求，但绝大多数场景下会发起http请求；它不支持直接读取file://协议文件，开发时需本地服务，例外是可fetch blob或data: url模拟响应。
HTML 中的 fetch() 必须走网络请求吗
不是必须，但绝大多数使用场景下它确实会发起网络请求——fetch() 本身是浏览器原生的网络请求 API，设计目的就是发起 HTTP 请求。它不支持直接读取本地文件（如 file:/// 协议下的 HTML 或 JSON），也不支持同步阻塞式调用。
常见误解是“把 JSON 放同目录就能用 fetch('./data.json')”，这在双击打开 HTML 文件时必然失败，因为浏览器会拒绝跨源（实际是 file:// 协议下无 origin，CORS 策略直接拦截）。
- 开发阶段：必须起一个本地服务（如
python3 -m http.server、npx serve或 VS Code Live Server 插件） - 生产环境：只要页面通过
http://或https://加载，fetch()就能正常发请求 - 例外情况：可以
fetch()到Blob或data:URL，但这属于“模拟响应”，不是真正绕过网络栈
fetch() 在 file:// 协议下报错的具体表现
双击打开 HTML 文件时，控制台通常显示类似错误：
Failed to fetch: TypeError: Failed to fetch
或更明确的提示：
Access to fetch at 'file:///path/to/data.json' from origin 'null' has been blocked by CORS policy.
这不是代码写错了，而是浏览器安全模型限制：file:// 没有 origin，而 fetch() 强制要求合法 origin 才能发起跨域（哪怕目标也是 file://）。
- Chrome / Edge：默认禁止，无法通过 flag 彻底关闭（
--unsafely-treat-insecure-origin-as-secure仅对指定 insecure origin 有效，不适用于file://） - Firefox：同样拦截，且无实用绕过方式
- 注意：
XMLHttpRequest同样受此限制，换函数没用
不用服务器也能测试 fetch() 的可行方案
如果只是想快速验证逻辑，又不想装服务，有几种轻量替代路径：
- 用
data:URL 模拟响应：fetch('data:application/json,{"msg":"ok"}').then(r => r.json()) - 用
Blob+URL.createObjectURL()构造本地响应体，适合测试大段 JSON 或二进制流 - 把数据硬编码进 JS 变量，只在开发时注释掉
fetch()，改用Promise.resolve(mockData)—— 简单直接，适合原型阶段 - VS Code 安装 “Live Server” 插件，右键 HTML 文件点 “Open with Live Server”，自动起
http://127.0.0.1:5500
别碰“禁用浏览器安全策略启动 Chrome”这种方案，它不稳定、不可复现，还会导致其他页面异常。
为什么不能用 fs.readFile 或 Node.js 方式在纯 HTML 里读文件
fs.readFile 是 Node.js 的模块 API，运行在服务端；而浏览器中的 HTML 页面运行在客户端沙箱里，没有文件系统访问权限（fs 根本不存在）。试图在 script 标签里写 require('fs') 或 import fs from 'fs' 会直接报 ReferenceError: require is not defined 或 Uncaught SyntaxError: Cannot use import statement outside a module。
- 混淆来源：看到别人用
fs成功读文件，大概率对方是在写 Node.js 脚本（如生成静态页），不是在浏览器里跑 - 混淆构建工具：Vite / Webpack 等会在构建时把
import data from './data.json'静态解析并内联，但那不是运行时fetch()，也不是浏览器直接读文件 - 真要读用户本地文件？得用
<input type="file">+FileReader，和fetch()完全无关
真正的边界就一条：浏览器里，所有资源加载要么走 HTTP(S)，要么走内存构造（Blob、data:），没有第三条路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
