Angular 5向服务器发起POST请求时出现400错误

看起来你遇到了一个典型的请求格式不匹配问题——虽然DELETE请求和浏览器访问都正常，但POST返回400，说明服务器没法解析你的POST请求内容。咱们一步步来排查：

最可能的几个原因&解决方法 #

1. 请求体不是合法的JSON格式 #

你已经设置了Content-Type: application/json，这意味着服务器期望接收标准JSON格式的请求体。如果你的请求体是JS对象，Angular的HttpClient会自动帮你序列化为JSON，但如果是手动拼接的字符串，很容易出现语法错误（比如漏引号、逗号，或者键名没加引号）。

排查方式：在发送请求前打印请求体，确认格式合法：

const requestBody = { /* 你的请求数据 */ };
console.log(JSON.stringify(requestBody)); // 看控制台输出是否是标准JSON

2. 缺少服务器要求的必填字段 #

POST请求通常比GET/DELETE需要更多参数，服务器可能对POST请求有严格的字段校验。比如浏览器访问的是GET接口，只需要ID，但POST可能要求提交名称、描述等必填项，你漏传了就会触发400错误。

排查方式：对比服务器API文档（或者查看服务器端日志），确认POST接口的必填字段，确保你的请求体包含所有要求的内容。

3. 请求头缺失或不正确 #

虽然你设置了Content-Type，但有些服务器可能要求额外的请求头（比如Authorization令牌，或者自定义的API版本头）。不过既然DELETE请求能成功，认证类的头部应该没问题，但可以再检查下POST请求的头部是否和DELETE完全一致（除了方法本身）。

4. 服务器端的参数校验逻辑 #

有些服务器对POST请求的参数类型要求更严格，比如服务器期望接收数字类型的id，但你传了字符串类型，就会触发400错误。这种情况前端控制台可能看不到详细错误，需要查看服务器端的日志信息。

实用排查工具 #

• 浏览器开发者工具：打开Network标签，查看POST请求的Request Payload和Headers，确认请求体和头部是否符合预期。
• Postman/curl：用这些工具模拟相同的POST请求，如果也返回400，那问题大概率在服务器端；如果能成功，那就是前端代码的问题。比如curl命令：

curl -X POST -H "Content-Type: application/json" -d '{"yourKey":"yourValue"}' serverURL

修正后的示例代码 #

这里给你一个标准的Angular POST请求写法，确保请求体和头部都正确：

private postrequest() {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      // 如果需要认证，添加Authorization头：
      // 'Authorization': 'Bearer ' + yourAuthToken
    })
  };

  // 确保请求体结构和字段完全符合服务器要求
  const requestBody = {
    title: 'Test Post',
    content: 'This is a test request body'
  };

  this.http.post('serverURL', requestBody, httpOptions)
    .subscribe({
      next: (response) => console.log('请求成功:', response),
      error: (error) => {
        console.error('请求失败:', error);
        // 可以尝试打印error.error，有些服务器会返回详细错误信息
        console.log('服务器返回的错误详情:', error.error);
      }
    });
}

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