TypeScript POST API请求报错400 Bad Request且未调用后端函数问题

问题背景 #

排查确认接口路由配置完全正确、请求参数/格式均符合接口规范的前提下，POST请求仍然返回400状态码，且未触发对应后端业务函数执行。

常见根因及解决方案 #

• Content-Type请求头不匹配
  后端接口要求的请求数据格式与请求头声明的格式不一致时，大部分Web框架会在参数解析阶段直接返回400，不会进入业务逻辑层。比如后端要求接收application/json格式数据，但请求头携带的是application/x-www-form-urlencoded。
  解决方法：请求头显式声明与后端要求一致的Content-Type，传JSON格式参数时配置Content-Type: application/json即可。
• 全局入参校验不通过
  带参数校验能力的框架（如SpringBoot、Django REST Framework等）会在进入业务函数前校验入参合法性，出现必填字段缺失、字段类型不匹配、格式不符合正则约束等问题时，直接拦截返回400。
  解决方法：逐一核对接口入参的必填项、数据类型、格式限制，也可临时关闭全局入参校验确认是否是该原因导致。
• 跨域OPTIONS预检请求被拦截
  带自定义请求头的POST属于复杂跨域请求，浏览器会先发送OPTIONS类型的预检请求校验跨域权限，如果后端没有放行OPTIONS请求，预检会直接返回400，实际POST请求不会发出，自然不会触发后端函数。
  解决方法：后端跨域配置中添加OPTIONS请求的放行规则。
• CSRF校验失败
  开启了CSRF防护的框架（Django、Spring Security默认开启）要求POST请求携带合法的CSRF Token，校验不通过时会直接返回400拦截请求。
  解决方法：请求时携带服务端下发的CSRF Token，纯前后端分离的接口场景可直接关闭对应接口的CSRF校验规则。

验证方法 #

调整配置后重新发起POST请求，查看返回状态码为200，且后端业务函数的日志正常打印即代表问题解决。

内容的提问来源于stack exchange，提问作者Arekadiusz