通过文件夹打开index.html失效，VS Code Live Server可正常运行求助

直接打开index.html时项目异常，核心原因是运行协议差异：VS Code Live Server使用http://本地服务器协议，直接打开文件则使用file://本地文件协议，两者的浏览器环境限制、路径解析规则完全不同，具体问题点和解决办法如下：

核心原因 #

• API请求的安全限制
  浏览器对file://协议有严格的同源策略限制，绝大多数API接口（不管是自研后端还是第三方服务）都不允许从file://协议发起请求，会被浏览器拦截，导致接口调用失败。而http://协议属于标准的Web运行环境，能正常发起API请求。

• 相对路径解析错误
  如果你的API请求用了相对路径（比如./api/getData），在http://协议下，路径是基于服务器根目录解析的；但在file://协议下，路径是基于本地文件系统的文件夹层级解析，规则差异会导致请求URL偏离预期，也就是你看到的URL变化问题。

解决办法 #

• 强制用本地服务器启动项目
  除了VS Code Live Server，还可以用这些轻量工具快速启动本地服务器：
  • Python3：在项目根目录执行 python -m http.server 8080，然后访问http://localhost:8080
  • Node.js：先安装serve工具（npm install -g serve），再在项目根目录执行 serve，按提示访问对应地址
• 修正API请求路径
  确保API的相对路径是基于项目根目录的正确路径，避免因文件系统层级导致的解析错误；如果是第三方API，直接使用完整的绝对URL（比如https://your-api-domain.com/api/getData）
• 临时放宽浏览器限制（不推荐）
  若仅需临时测试，可通过浏览器启动参数关闭file://的安全限制，比如Chrome在快捷方式中添加 --allow-file-access-from-files 参数后启动，但这种方式有安全风险，不适合日常开发。

内容的提问来源于stack exchange，提问作者Gaurav Chaudhary