如何在VSCode中运行html并调用本地API接口-VSCode-PHP中文网

根本解法是让html在http协议下运行并配置代理绕过cors，推荐用vite配置proxy将'/api'转发至'http://localhost:3000'，确保前后端域名一致；若坚持用live server，可临时禁用chrome安全策略但不稳定且不推荐。

如何在vscode中运行html并调用本地api接口

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 消失。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

注意：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 成功（比如端口被占、数据库连不上导致启动失败却没报错），结果前端一直在等一个根本没响应的服务。