表单提交失败是因为本地 file:// 协议下无 http 服务接收请求，浏览器无法发送 post 请求至 action 指定地址，导致 net::err_file_not_found 或 cors 报错；必须通过 http://localhost（如 live server、python3 -m http.server）运行才能正常提交。
为什么直接双击打开HTML文件会导致表单提交失败
因为浏览器在 file:// 协议下禁止跨源请求，而大多数表单默认用 POST 提交到后端（比如 action="/submit"），但本地文件没有服务器，fetch 或表单提交会直接被拒绝，控制台报错类似：net::ERR_FILE_NOT_FOUND 或 Blocked by CORS policy: Cross origin requests are only supported for protocol schemes。
这不是你 HTML 写错了，是运行环境缺失 HTTP 服务。VSCode 本身不带 Web 服务器，必须额外起一个。
- 别用右键“Open with Live Server”却没装插件——先确认已安装
Live Server（作者：Ritwick Dey） - 别把
form的action设为绝对路径如/api/login，本地服务根目录就是当前文件所在目录，应改用相对路径或留空（action=""表示提交给自身） - 如果用
fetch提交，注意默认发送的是application/x-www-form-urlencoded，但 JS 手动构造时容易漏设Content-Type或没用URLSearchParams
用 Live Server 插件启动轻量 HTTP 服务
这是最常用、零配置的方案：它会在 localhost:5500（或自动找空闲端口）起一个静态文件服务器，并自动刷新页面。
- 在 VSCode 扩展市场搜
Live Server，安装并重启 - 打开你的
index.html文件，右键选择Open with Live Server（或点右下角绿色「Go Live」按钮） - 此时地址栏是
http://127.0.0.1:5500/index.html，不是file:///...—— 这才是关键区别 - 表单提交就能正常发请求了；若后端还没写，可先用
action="#"+onsubmit="return false"挡住默认行为，专注调试 JS 逻辑
用 VSCode 终端手起 Python 或 Node.js 服务（适合需要 POST 处理的场景）
Live Server 只服务静态文件，不处理 POST 请求。如果表单要真正提交数据（比如模拟登录），就得自己搭个能响应 POST 的最小后端。
Python 方案（无需安装额外包）：
python3 -m http.server 8000 --bind 127.0.0.1:8000
但注意：这个命令仍不支持 POST，只是比 Live Server 多个端口自定义。真要收 POST，推荐用 http-server（Node）加 -c-1 禁缓存，或更简单的——用 VSCode 插件 REST Client 配合手动发请求测试接口，绕过表单。
- 装好
http-server：npm install -g http-server - 终端进项目目录，运行：
http-server -p 8080 -c-1（-c-1防止浏览器缓存 JS/HTML） - 它比 Python 自带 server 强在默认允许所有 CORS，方便前端调
fetch('/api')
表单提交调试时最容易忽略的三件事
很多问题不是环境或代码错，而是细节没对齐：
-
form标签没写method="POST"，默认是GET，数据全拼在 URL 上，后端收不到body - 输入框没设
name属性，例如<input type="text">不会随表单提交；必须是<input name="username"> - 用了
event.preventDefault()却忘了在 JS 里手动收集数据，比如漏掉new FormData(form)或没调fetch，结果看起来“点了没反应”
真实调试节奏通常是：先确保 Live Server 起了 → 表单能发出请求（看 Network 面板）→ 再看后端是否返回 200 → 最后检查 JS 里怎么解析响应。别一上来就怀疑 HTML 结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
