使用Live Server扩展通过本地服务器运行html页面，确保API调用正常。安装Live Server后右键选择“Open with Live Server”，页面将通过http://127.0.0.1:5500访问，避免file://协议限制。确保API URL完整且支持CORS，如https://jsonplaceholder.typicode.com/posts。检查浏览器开发者工具中的Network和console输出以调试请求。若不使用Live Server，可用python或node.js启动本地服务器。
在 vscode 中运行带有 API 调用的 HTML 页面，关键在于使用本地服务器启动页面，而不是直接打开 HTML 文件。因为现代浏览器出于安全限制，不允许从 file:// 协议中发起网络请求（如 fetch 或 XMLHttpRequest），这会导致跨域或协议不被允许的错误。
1. 安装并使用 Live Server 扩展
这是最简单、最常用的方法：
- 打开 VSCode，进入左侧扩展面板（快捷键 Ctrl+Shift+X）
- 搜索 Live Server，由 Ritwick Dey 开发
- 点击安装
- 安装完成后，打开你要运行的 HTML 文件
- 右键点击编辑器中的代码，选择 Open with Live Server
Live Server 会自动启动一个本地服务器（通常是 http://127.0.0.1:5500），你的页面将在浏览器中打开，并能正常发起 API 调用。
2. 确保 API 调用使用正确的 URL
即使使用了本地服务器，API 地址也必须正确：
立即学习“前端免费学习笔记（深入）”；
- 确保 API 地址是完整的，例如：https://jsonplaceholder.typicode.com/posts
- 避免使用相对路径调用外部 API
- 检查浏览器开发者工具（F12）的 Network 和 Console 标签页，查看请求是否发出、是否有错误
示例代码：
<script> fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(data => console.log(data)); </script>
3. 检查 CORS 是否支持
某些 API 不允许来自本地页面的请求，会返回 CORS 错误。确认你调用的 API 支持跨域请求。如果遇到 CORS 问题，可尝试使用代理服务或后端中转，但这属于进阶处理方式。
4. 其他替代方法（可选）
如果你不想用 Live Server，也可以：
- 使用 Python 快速启动服务器：
在项目目录下运行 python -m http.server 8000（Python 3） - 使用 node.js 的 http-server：
先安装 npm install -g http-server，然后运行 http-server
基本上就这些。只要通过本地服务器运行 HTML 文件，API 调用就能正常工作。Live Server 是 VSCode 用户最推荐的方式，简单稳定。