根本解法是让HTML在http协议下运行并配置代理绕过CORS，推荐用Vite配置proxy将'/api'转发至'http://localhost:3000'，确保前后端域名一致；若坚持用Live Server，可临时禁用Chrome安全策略但不稳定且不推荐。
VSCode 本身不带 Web 服务器，直接双击打开 index.html 或用 Open with Live Server 插件运行时，浏览器地址是 file:// 协议 —— 这会导致调用本地 API（如 http://localhost:3000/api/data）被浏览器拦截，报 CORS 错误或 net::ERR_FAILED。根本解法不是“怎么运行 HTML”，而是“怎么让 HTML 在 http:// 协议下运行并绕过跨域限制”。
为什么 Live Server 插件调不通本地 API？
Live Server 默认启动的是 http://127.0.0.1:5500/（或类似），它只是静态文件服务器，不代理后端请求。当你在 JS 里写 fetch('http://localhost:3000/api/data')，浏览器会发出跨源请求，而你的后端（比如 Express、Python Flask）若没显式设置 Access-Control-Allow-Origin，就会被拒绝。
常见错误现象：
Access to fetch at 'http://localhost:3000/api/data' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy-
net::ERR_CONNECTION_REFUSED（其实是前端发出了请求，但后端没开，或端口错） - 控制台无报错，但
fetch().then()不执行 —— 可能是请求被静默拦截，或 Promise 没 catch 错误
用 VSCode 启动一个支持代理的开发服务器（推荐 vite）
Vite 内置开发服务器可配置 proxy，把前端请求转发到本地 API，避免跨域问题，且无需改后端代码。
立即学习“前端免费学习笔记（深入）”；
实操步骤：
- 在 HTML 项目根目录初始化 vite：
npm create vite@latest my-app -- --template html - 进入项目：
cd my-app，安装依赖：npm install - 编辑
vite.config.js，添加代理配置：
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})这样，前端请求 fetch('/api/data') 就会被自动转给 http://localhost:3000/api/data，协议一致、域名一致，CORS 消失。
注意：target 必须是你后端实际运行的地址；changeOrigin: true 是必需的，否则某些后端（如 Express）会因 Host 头不匹配拒绝请求。
如果坚持用 Live Server，临时绕过 CORS 的风险操作
仅限开发调试，不可用于生产，且 Chrome 94+ 已禁用部分命令行参数。
- 关闭 Chrome，终端运行：
chrome.exe --user-data-dir="C:/temp/chrome_dev" --disable-web-security --unsafely-treat-insecure-origin-as-secure="http://127.0.0.1:5500"（Windows） - Mac/Linux 替换为对应路径和命令，注意
--unsafely-treat-insecure-origin-as-secure必须配合--user-data-dir使用，否则无效 - 此时再用 Live Server 打开 HTML，就能发请求到
http://localhost:3000了
但这个方式极不稳定：每次 Chrome 更新都可能失效；多个标签页共用一个 user-data-dir 会冲突；Firefox 不支持等效参数。不如直接切到 vite。
后端必须开着，且接口路径要对得上
前端无论用什么方式运行，后端服务（如 Node.js、Python、Java）都得提前启动，并监听你写的地址和端口。
- 检查后端是否真在运行：
curl http://localhost:3000/api/data或用 Postman 测试 - 确认后端响应头包含：
Access-Control-Allow-Origin: *（简单场景）或Access-Control-Allow-Origin: http://127.0.0.1:5500（更安全） - 如果后端用 Express，加中间件：
app.use(cors({ origin: 'http://127.0.0.1:5500' }))，别漏了npm install cors - 确保前端 fetch 的 URL 和后端路由完全匹配，大小写、斜杠、版本号（如
/v1/data）都要一致
最容易被忽略的是：后端进程挂着但没真正 listen 成功（比如端口被占、数据库连不上导致启动失败却没报错），结果前端一直在等一个根本没响应的服务。
