纯前端无法真正触发webhook，但可用form模拟请求体或fetch发送json；需显式设content-type、json.stringify payload，并避免file://协议限制。
怎么用 HTML 表单发 POST 请求模拟 Webhook
纯前端无法真正触发 Webhook（服务端必须接收并响应），但可以用 form + method="POST" 模拟请求体和头，配合本地调试工具或接收端验证。关键不是“发出去”，而是“构造得像”。
- Webhook 本质是服务端对端点的 POST 调用，浏览器表单能发出标准
application/x-www-form-urlencoded或multipart/form-data，但多数 Webhook 要求application/json—— 表单原生不支持，得靠fetch - 如果只是测试 payload 结构、字段名、嵌套逻辑，
form配合 JS 序列化也能凑合；但要测签名头（如X-Hub-Signature-256）、重试逻辑、超时行为，必须走真实后端或代理工具（如ngrok+localhost:3000） - 别把
action设成生产 Webhook 地址，容易误触发；优先指向本地/debug或https://webhook.site/xxx这类临时接收页
用 fetch 发 JSON Webhook 请求要注意什么
fetch 是唯一靠谱的纯前端模拟方式，但它默认不带 Content-Type: application/json，也不自动序列化对象，漏掉任一环节就会被接收方拒收。
- 必须显式设置
headers: { 'Content-Type': 'application/json' }，否则很多 Webhook 接收器（如 GitHub、Stripe）直接返回415 Unsupported Media Type - payload 必须是字符串，不是对象：
JSON.stringify({ event: 'push', repo: { name: 'test' } })，否则会发空体或报错TypeError: Request with GET/HEAD method cannot have body - 某些平台要求额外头，比如 Slack 需要
Authorization: Bearer xoxb-...，GitHub Webhook 测试需X-Hub-Signature-256（前端无法生成，只能跳过校验或用 mock 服务） - 浏览器同源策略不影响
fetch到外部地址，但目标服务必须允许跨域（Access-Control-Allow-Origin），否则控制台报CORS error，不是你代码问题
HTML 自定义 payload 输入区怎么写才实用
一个能改、能试、不报错的输入区，核心是绑定 textarea 值到 JS 变量，再塞进 fetch，而不是用 innerHTML 拼接或硬编码 JSON 字符串。
- 用
textarea的id="payload-input"，JS 里取值用document.getElementById('payload-input').value，别用innerText或innerHTML，它们会吞掉换行和空格 - 加个格式校验按钮：点击执行
JSON.parse()，捕获SyntaxError并提示行号，比等fetch失败再查强得多 - 预设几个常用模板（如 GitHub push、Stripe charge.succeeded），用下拉切换，避免每次手动敲
{"repository":{"name":"..."}} - 别自动美化 JSON（
JSON.stringify(JSON.parse(x), null, 2)），有些 Webhook 对空白敏感，或解析库不兼容换行
为什么本地 HTML 文件双击打开就发不出 Webhook
因为 file:// 协议下，fetch 被浏览器禁止发起跨域请求，哪怕目标是 http://localhost:8000，也会卡在 net::ERR_FAILED 或静默失败。
- 解决办法只有两个：起个本地 HTTP 服务（
npx http-server、python3 -m http.server），或把文件拖进已打开的 VS Code Live Server 页面 - Chrome 禁用安全策略（
--unsafely-treat-insecure-origin-as-secure="file://"）只适用于开发机，且新版 Chrome 已逐步封死，不推荐 - 即使绕过协议限制，
XMLHttpRequest和fetch在file://下仍可能因缺少Origin头被服务端拒绝，这不是前端能控的
真要离线可运行，就得放弃纯 HTML，改用桌面工具（如 Postman、curl）或起一行 Python HTTP 服务来中转——前端模拟的边界就在这里，别硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
