错误,fetch的method参数不必须大写,实际应小写;规范要求method值为小写,如"get"、"post",大写可能在严格环境被拒绝或导致路由匹配失败。

Fetch 的 method 参数必须大写字符串
浏览器中 fetch() 的 method 选项不接受小写或首字母大写形式,比如 "get" 或 "Post" 会静默回退为 GET(某些旧版 Safari 甚至直接报错)。必须用全大写字符串:"GET"、"POST"、"PUT"、"DELETE"。
常见错误现象:发了 method: "post" 却发现请求头里没有 Content-Type,服务器也收不到 body——实际是请求被当成了 GET,body 被忽略。
-
method: "GET":默认值,即使不写也会生效;带 query 参数时需手动拼接 URL,fetch()不自动处理body -
method: "POST":需显式设置headers(如{"Content-Type": "application/json"}),否则后端可能无法解析body -
method: "PUT"和"DELETE":语义上等同于 POST,但部分 RESTful API 依赖它们做资源操作判断;同样需要配 headers 和 body
GET 请求不能带 body,参数只能走 URL
HTTP 规范明确禁止 GET 请求携带 body,fetch() 会直接丢弃 body 字段。强行传 body 不报错,但服务端收不到。
正确做法是把参数序列化后拼到 URL 后面:
立即学习“前端免费学习笔记(深入)”;
const params = new URLSearchParams({ id: 123, status: "active" });
fetch(`/api/users?${params}`);
注意:URLSearchParams 自动编码,比手拼 ?id=123&status=active 更安全;如果参数是嵌套对象,需先扁平化或改用库(如 qs.stringify())。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
POST/PUT/DELETE 必须配 headers 才能发 JSON
如果不设 headers,fetch() 默认发送原始二进制 body(Content-Type: text/plain;charset=UTF-8),后端框架(如 Express、Django)通常不会解析成 req.body。
- 发 JSON:必须加
{"Content-Type": "application/json"},且body是JSON.stringify(data) - 发表单数据:用
FormData实例,此时不要设Content-Type(浏览器会自动生成带 boundary 的 multipart 头) - 发纯文本:可设
{"Content-Type": "text/plain"},body直接传字符串
漏掉 headers 是最常导致“前端发了但后端收不到数据”的原因。
CORS 预检会因 method 或 headers 触发 OPTIONS 请求
当使用 "PUT"、"DELETE",或设置了自定义 header(如 "Authorization")、非简单 Content-Type(如 "application/json")时,浏览器会在真正请求前自动发一次 OPTIONS 预检。
这意味着后端必须响应预检请求,否则 fetch 会直接失败(控制台报 net::ERR_FAILED 或 CORS 错误),而不会走到你写的 catch 里。
- 检查响应头是否包含
Access-Control-Allow-Methods: PUT, DELETE - 确认
Access-Control-Allow-Headers包含你用的自定义头或Content-Type - 开发时可用
curl -X OPTIONS -H "Origin: http://localhost:3000" -I http://api.example.com/xxx快速验证
预检失败往往不报具体原因,只显示跨域错误,容易误判为前端代码问题。


















