前端发来一个压缩包，解压后双击 index.html，浏览器一片白。F12 控制台一行红字：Cross origin requests are only supported for protocol schemes: http, https, chrome-extension。

这不是代码坏了，是打开方式不对。双击走的是 file:// 协议，浏览器对它有额外限制。

file 协议下会坏掉的三类东西

  • fetch 和 XHR：读本地 JSON 直接报跨域，写 /api 会指向磁盘根目录
  • ES module：script 标了 type=module，加载本地 js 会失败，报 CORS 或者 MIME 错误
  • 路径和存储：大小写敏感，中文路径可能被编码，localStorage 也按文件隔开

起一个本地服务最快

在项目根目录执行 python -m http.server 8000，浏览器打开 http://localhost:8000。装了 Node 就用 npx serve，PHP 环境用 php -S 127.0.0.1:8000。VS Code 装 Live Server 插件，右键 Open with Live Server 也行。入口文件必须叫 index.html，服务默认找它。

端口被占用怎么办

启动报 Address already in use，Windows 用 netstat -ano | findstr :8000 查 PID，再 tasklist /fi 找进程名；Linux 用 ss -lntp。懒得查就换端口，python -m http.server 8081。

放到服务器上才算真的打开

Nginx 把 dist 目录配成 root，写 index index.html；IIS 在默认文档里加一条。SPA 项目还要配 try_files，否则刷新子路由会 404。手机预览用电脑的局域网 IP 加端口，防火墙要放行。

双击白屏的其他原因

默认打开方式被改成了编辑器，右键选浏览器；文件其实是 .html.txt，扩展名被隐藏了；压缩包没解压，直接在压缩软件里预览。这些跟代码无关，先排除再怀疑项目。

纯静态、不联网、不用模块的页面，双击能看；只要带接口或者用了 import，就必须走 http。