必须通过后端中转提交表单数据至第三方接口，因浏览器CORS策略禁止前端直连；前端提交至自身API（如/api/submit-to-slack），后端校验、脱敏、添加认证头后转发请求，严禁泄露密钥。
表单直接提交到第三方接口会失败
浏览器原生 <form> 提交无法跨域发送数据到第三方接口，除非对方明确支持且已配置 CORS + 允许 POST/GET 方法。绝大多数第三方服务（如 Stripe、Slack Webhook、Mailchimp API）不接受前端直连，否则会触发 CORS error 或 403 Forbidden。这不是你代码写错了，是浏览器安全策略强制拦截。
必须用后端中转，不能跳过
真实可行的路径只有一条：表单先提交到你自己的服务器端接口（比如 /api/forward），再由该接口用 cURL、fetch、axios 等发起请求，把数据转发给第三方。
- 前端表单
action填你自己的路径，例如"/api/submit-to-slack" - 后端收到后，校验字段、脱敏敏感信息（如手机号、邮箱）、添加必要 header（如
Authorization、Content-Type） - 用
POST向第三方 URL 发送 JSON 或multipart/form-data，取决于对方要求 - 别把第三方密钥（如
SLACK_BOT_TOKEN）暴露在前端 JS 里——哪怕藏在注释或变量中也不行
如果非要“看起来”是前端提交，得用 fetch + FormData
这是唯一能绕过页面跳转、又保持控制权的方式，但依然要走你自己的后端中转接口。
- 监听
submit事件，调用event.preventDefault() - 用
new FormData(formEl)收集所有字段，包括文件输入 - 发
fetch("/api/relay", { method: "POST", body: formData }) -
enctype="multipart/form-data"不用手动设，FormData会自动处理边界和编码 - 后端接口返回状态后，再根据
response.ok或data.status给用户提示
常见第三方接口对接要点
不同服务对参数名、格式、认证方式差异极大，不能套模板。
立即学习“前端免费学习笔记（深入）”；
- Slack Webhook：只要一个
POST到 webhook URL，body 是 JSON，字段必须叫text或blocks，不认message - Mailchimp：需
POST到https://usX.api.mailchimp.com/3.0/lists/{list_id}/members，header 带Authorization: apikey xxx-usX，body 是 JSON，字段名严格匹配其文档（如email_address不是email） - Stripe Checkout：根本不用你传表单数据，而是用
stripe.redirectToCheckout()，前端只传 session_id，其余全由 Stripe 后端完成 - 任何要求
application/json的接口，后端中转时别用FormData直传，要JSON.stringify()+ 设置Content-Type: application/json
最容易被忽略的是第三方接口的「字段命名契约」——它不按你表单的 name 属性来，而是按自己 API 文档定义的 key 名。填错一个字母，就静默失败。
