使用VSCode运行html实现前后端分离调试-VSCode-PHP中文网

vscode直接打开html文件因使用file://协议触发浏览器同源策略，导致无法调用http://localhost:3000等后端api；必须通过live server等工具以http://协议（如http://127.0.0.1:5500）加载页面，并配置代理或后端cors头方可正常通信。

使用vscode运行html实现前后端分离调试

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。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

代理只在 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"]
    }
  ]
}
</node_internals>

后端启动命令要加 --inspect=9229（如 node --inspect=9229 server.js）
Chrome 调试端口 9222 和 Node 调试端口 9229 必须不同，否则会报 EADDRINUSE
前端断点打在 .html 的 <script></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