phpstorm内置服务器需标记目录为sources root才能服务index.html，否则404；必须通过http://而非file://协议运行，否则fetch、相对路径等因浏览器安全限制失效。
PhpStorm 的内置服务器不能直接运行 index.html 文件——它只响应 HTTP 请求，而双击打开 HTML 是走 file:// 协议，此时浏览器会禁用脚本、AJAX、相对路径资源加载等关键功能，根本不是“本地测试”的正确路径。
为什么 PhpStorm 点击“Open in Browser”仍报 404 或空白？
这是最常被忽略的起点：PhpStorm 默认不会把项目根目录当作 Web 根。即使你右键 index.html → “Open in Browser”，它实际请求的是 http://localhost:63342/your-project/index.html，但该地址由 JetBrains 的内部代理服务提供，仅对已标记为“Sources Root”的目录生效。
- 未标记目录 → 返回 404 或空响应
- 文件路径含中文或空格 → URL 编码异常，部分浏览器拒绝加载 JS/CSS
- 用了
fetch('./api/data.json')→ 因跨域被浏览器拦截（file://下 fetch 默认无 origin）
必须设置 “Mark Directory as → Sources Root”
这是唯一让内置服务器识别并服务 HTML 文件的前提。不设这个，其他操作全无效。
- 在项目视图中右键你的项目主文件夹（比如
my-frontend） - 选择 Mark Directory as → Sources Root（图标变成蓝色小地球）
- 确认
index.html在该目录下（不是子文件夹里，除非你也标记了子文件夹） - 之后右键
index.html→ “Open in Browser”，URL 会变成类似http://localhost:63342/index.html，这才是真正走内置服务器的路径
遇到 CORS、fetch 失败或相对路径 404 怎么办？
这些不是 PhpStorm 的问题，而是浏览器对本地文件协议的限制。只有走 http:// 才能绕过。
- 确保所有资源路径用相对路径（如
./style.css、../js/app.js），不要用file:///或绝对磁盘路径 - JS 中避免
fetch('/api/users')这种根路径写法——它会请求http://localhost:63342/api/users，而该路径并不存在；改用fetch('./api/users.json')（同目录）或启动一个真实后端 - 若需模拟 API，可用 PhpStorm 内置的
JavaScript Debug配置 + Live Edit，或临时起个python3 -m http.server 8000做代理
真正的本地测试，核心就一条：让浏览器通过 http:// 加载页面，而不是 file://。PhpStorm 内置服务器能做到这点，但前提是目录标记和路径写法都得对——漏掉任一环，看到的都是“能打开但不工作”的假象。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
