Live Server是唯一可靠零配置方案，因其启动真实HTTP服务（如http://127.0.0.1:5500）绕过file://协议限制；fetch在file://下因origin为null被浏览器直接拦截，不发请求，控制台报Access to fetch...from origin 'null' blocked。
直接用 Live Server 插件启动，是唯一可靠且零配置的解决方式；其他所谓“禁用安全策略”或“右键打开”本质都是绕过问题，不是解决问题。
为什么 file:// 协议下 fetch 一定失败
浏览器把 file:// 当作 origin 为 null 的特殊协议，任何 fetch('./data.json') 或 XMLHttpRequest 请求都会被立即拦截，控制台报错类似：Access to fetch at 'file:///C:/project/data.json' from origin 'null' has been blocked。这不是你代码写错了，是浏览器根本没发请求出去——服务端日志里也看不到这次调用。
常见误操作包括：
- 右键 HTML 文件 → “Open with Browser”，地址栏显示
file:///...—— 无效 - 在终端执行
start index.html或双击文件 —— 仍是file://，所有 JS 模块、图片路径、localStorage在部分浏览器下也会受限 - 以为加了
mode: 'no-cors'就能读数据 —— 实际返回的是opaque响应，response.json()直接报错
Live Server 插件怎么配才真正起作用
装完插件后，关键不是“点一下”，而是确认它启动的是 http://127.0.0.1:5500（或自定义端口）这个真实 HTTP 地址，而不是跳转到某个 file:// 页面。
立即学习“前端免费学习笔记（深入）”；
必须满足以下条件：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- VS Code 中通过
File → Open Folder打开整个项目根目录（不是只打开单个 HTML 文件） - 当前编辑器标签页是你要预览的
index.html或其他 HTML 文件（未保存也行，但建议先Ctrl+S） - 右键该文件 → 选
Open with Live Server，或点状态栏蓝色Go Live按钮 - 检查浏览器地址栏：必须是
http://127.0.0.1:5500/xxx.html，不是file://开头
如果点完没反应，大概率是端口被占；可在 .vscode/settings.json 中加："liveServer.settings.port": 5501 换个端口。
跨域请求后端接口怎么办（比如 fetch('http://localhost:3000/api')）
Live Server 本身不处理跨域，它只是把 file:// 换成 http://127.0.0.1:5500，让你能加载本地资源。但如果你的前端页面运行在 http://127.0.0.1:5500，而 fetch 去请求 http://localhost:3000/api，这仍是跨域请求，浏览器会校验响应头里的 Access-Control-Allow-Origin。
此时有两个正经方案：
- 让后端加 CORS 响应头（开发环境最简单，例如 Express 加
res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')） - 用 Live Server 自带的代理功能，在项目根目录建
.vscode/settings.json，填入：{ "liveServer.settings.proxy": { "enable": true, "proxyUrl": "http://localhost:3000", "proxyPrefix": "/api" } }之后所有fetch('/api/users')会自动转发到http://localhost:3000/api/users，对浏览器来说就是同源请求
注意：proxyPrefix 是前缀匹配，不能带通配符；如果后端有多个不同路径（如 /user、/order），得手动配多条 proxyPrefix。
别碰 --disable-web-security 这种临时方案
命令行启动 Chrome 加 --disable-web-security --user-data-dir="C:\temp" 确实能绕过限制，但它要求：
- 必须用全新
--user-data-dir，不能复用已有 Chrome 窗口，否则参数被忽略 - Windows 路径含空格时，
runtimeArgs里必须用引号包裹完整路径 - 该模式下所有网页都失去安全隔离，一旦误开恶意页面，后果不可控
它只适合极个别调试场景（比如验证某段 JS 是否真能发请求），绝不该作为日常开发流程。真正要联调接口，就老实用代理或改后端响应头。
