解决VSCode运行html时页面被浏览器拦截的问题-VSCode-PHP中文网

必须用 http 服务（如 live server）而非 file:// 协议运行网页，因浏览器禁止 null 源发起 fetch、模块导入、localstorage 等操作；启动时需通过 vs code open folder 打开整个项目，并右键 html 文件选 open with live server，确保地址栏显示 http://127.0.0.1:5500/ 而非 file:///。

解决vscode运行html时页面被浏览器拦截的问题

直接双击 HTML 文件或用 VS Code 自带预览打开，地址栏显示 file:///，就一定会触发浏览器安全拦截——这不是你的代码问题，是协议层被限制死的。

为什么 `file://` 协议下 fetch、import、localStorage 全都失效

浏览器把 file:// 视为源 null，而 null 源被禁止发起任何受控网络请求：fetch 本地 JSON、import 模块、甚至读写 localStorage 都可能静默失败。控制台报的 Access to fetch at 'xxx' from origin 'null' 或 Failed to load module script 都是这个原因，不是路径写错，也不是语法错误。

file:// 下相对路径 ./data.json 看似合理，但浏览器根本不允许它被 fetch() 加载
<script type="module"></script> 在 file:// 下永远报 MIME 类型错误，因为服务端没返回 application/javascript
即使所有资源都在同一文件夹，只要协议是 file://，现代 Chrome/Firefox/Edge 就会拦

必须用 `http://` 服务，Live Server 插件怎么装才不踩坑

装插件不是目的，起对服务才是关键。官方 Live Server（作者 Ritwick Dey）能自动加 Access-Control-Allow-Origin: * 响应头，绕过 CORS，但启动方式错了照样白屏。

小红书长文-谷歌浏览器

在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。

下载

必须在 VS Code 中通过 File → Open Folder 打开整个项目文件夹，不能只打开单个 index.html
右键要运行的 HTML 文件（确保该标签页处于焦点），选 Open with Live Server；如果菜单没出现，说明插件未启用或 VS Code 没聚焦到该文件
启动后看右下角状态栏：必须是 http://127.0.0.1:5500/xxx.html，不是 file:/// —— 这是唯一判断标准
端口被占时它会自动跳到 5501 等，不用手动改配置，但若防火墙拦截非标端口，可固定端口："liveServer.settings.port": 8080 写进 settings.json

Live Server 启动了还是黑屏？先盯住 Network 和 Console

页面空白 ≠ 代码没跑，大概率是资源加载失败或 JS 卡在 DOM 操作上。别猜，直接看开发者工具。

按 F12 打开 DevTools，切到 Network 标签页，刷新页面，看哪些请求状态码是 404：路径大小写不对、多了一层 src/、斜杠方向写成 \ 都会导致 404
切到 Console，清空日志再刷新，重点看 net::ERR_FILE_NOT_FOUND（路径错）、Cross-Origin Request Blocked（还在 file://）、Cannot find module（ESM 模块路径没走 HTTP）
<script></script> 放在里且没加 defer，很可能 document.getElementById 拿不到元素，加一句 console.log('loaded') 确认脚本是否执行
如果用了 <base href="/xxx/">，Live Server 默认根目录可能和 base 不匹配，建议删掉 base 或手动配 liveServer.settings.root

不想装插件？`python -m http.server` 能用但有硬伤

它能起服务，但只是“能访问”，不是“适合开发”。很多新手以为端口对了就万事大吉，结果卡在细节上。

命令行进项目根目录后运行 python -m http.server 8000，浏览器必须访问 http://localhost:8000/index.html（不能省略 /index.html，否则看到的是目录列表）
它不支持热重载，改完 HTML/JS/CSS 必须手动刷新；Live Server 是改保存即刷新
它默认不设 CORS 头，fetch('/api') 仍会被拦；Live Server 默认允许跨域
Python 2 用户用 python -m SimpleHTTPServer 8000，但 Python 2 已停更，不建议依赖

真正容易被忽略的点是：Live Server 的“根目录”完全取决于 VS Code 当前打开的文件夹，而不是你右键的 HTML 文件位置。哪怕只差一层目录，src="./js/app.js" 就可能 404。别信自动跳转，复制右下角状态栏的完整 URL 手动粘贴进浏览器，才能确认服务真从你想要的路径启起来了。