VSCode直接打开HTML文件因使用file://协议触发浏览器同源策略，导致无法调用http://localhost:3000等后端API；必须通过Live Server等工具以http://协议（如http://127.0.0.1:5500）加载页面，并配置代理或后端CORS头方可正常通信。
VSCode里直接打开HTML文件为啥不能调用后端API
因为浏览器通过 file:// 协议加载本地 HTML 时，会触发跨域限制（CORS），且后端服务监听的是 http://localhost:3000 这类地址，而 file:// 不是合法的源——根本发不出请求。这不是 VSCode 的问题，是浏览器安全策略本身决定的。
常见错误现象：Failed to load resource: net::ERR_FILE_NOT_FOUND 或 Access to fetch at 'http://localhost:8080/api' from origin 'null' has been blocked。
- 必须让前端页面走
http://协议加载，哪怕只是本地开发服务器 - VSCode 自带的
Open with Live Server插件就干这事：起一个最小 HTTP 服务，把index.html挂在http://localhost:5500下 - 确保你的后端服务（比如 Express、Spring Boot）已启动并监听明确端口（如
http://localhost:3000） - 前端代码里所有 API 请求地址写成完整
http://localhost:3000/xxx，别用相对路径或/api/xxx（除非配了代理）
Live Server插件怎么配代理绕过跨域
Live Server 默认不支持代理，但可以手动加配置让它把特定请求转发给后端，避免 CORS 报错，也省得改前端代码里的 URL。
在项目根目录新建 .vscode/settings.json（不是用户级设置），内容如下：
立即学习“前端免费学习笔记（深入）”；
{
"liveServer.settings.proxy": {
"enable": true,
"proxyList": [
{
"source": "/api",
"target": "http://localhost:3000"
}
]
}
}
这样，前端发 fetch('/api/users') 就会被 Live Server 拦截并转给 http://localhost:3000/api/users。
- 代理只在 Live Server 启动时生效，关掉服务就失效
-
source是前端请求路径前缀，必须以/开头；target必须带协议和端口 - 如果后端接口没有统一前缀（比如混用
/user和/order），就得多写几条proxyList项 - 注意：代理不会修改响应头，后端仍需返回正确的
Access-Control-Allow-Origin才能被浏览器接受（开发阶段可临时关闭后端 CORS 检查）
调试时前后端断点怎么一起跟
VSCode 支持同时 attach 前端（Chrome）和后端（Node.js / Python / Java 等），但得分别配置 launch.json，且端口不能冲突。
以 Node.js 后端 + Chrome 前端为例，在项目根目录建 .vscode/launch.json：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to Backend",
"port": 9229,
"skipFiles": ["<node_internals>/**"]
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Frontend",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}",
"runtimeExecutable": "chrome",
"userDataDir": "${workspaceFolder}/.chrome",
"port": 9222
}
],
"compounds": [
{
"name": "Full Stack Debug",
"configurations": ["Attach to Backend", "Launch Frontend"]
}
]
}
- 后端启动命令要加
--inspect=9229（如node --inspect=9229 server.js） - Chrome 调试端口
9222和 Node 调试端口9229必须不同，否则会报EADDRINUSE - 前端断点打在
.html的<script>里或外部.js文件中均可，但需确保源码映射正确（Live Server 不影响 sourcemap） - 如果用的是非 Node 后端（比如 Python Flask），换用
python类型配置，并确保 Flask 启用了调试模式（debug=True）
为什么改了HTML或JS刷新后没生效
大概率是浏览器缓存了旧资源，尤其当使用 Live Server 时，它默认不强制禁用缓存。
- 按
Ctrl+F5（Windows/Linux）或Cmd+Shift+R（Mac）硬刷新，跳过缓存 - 在 Chrome DevTools 的 Network 面板勾选
Disable cache（仅 DevTools 打开时有效） - Live Server 插件设置里加
"liveServer.settings.donotShowInfoMsg": true并重启，有时弹窗干扰也会导致热更新异常 - 检查文件保存是否成功——VSCode 右下角状态栏会显示
UTF-8或Auto Save: on，没保存的修改自然不会被服务读到 - 如果用了构建工具（如 Vite、Webpack），别混用 Live Server，它们自带 dev server，功能更全且自动处理 HMR
前后端分离调试真正的麻烦点不在启动，而在网络链路变长了：本地文件 → Live Server → 浏览器 → 后端服务 → 数据库。每段都可能卡住，排查时得一段段确认协议、端口、路径、CORS 头、防火墙，少一个环节就白忙活。
