Angular中携带Bearer Token无法发送Form Data问题求助

这个问题的核心原因很明确：你手动设置了错误的Content-Type请求头，导致后端无法正确解析你发送的FormData数据。

为什么会失效？ #

当你发送FormData类型的请求时，浏览器会自动生成正确的Content-Type——multipart/form-data; boundary=xxxx（其中boundary是浏览器自动生成的分隔符，用来区分FormData里的不同字段）。但你手动指定了Content-Type: application/json，这会让后端误以为请求体是JSON格式，而实际传递的是FormData，自然就解析失败了。

修复后的Service代码 #

只需要保留Authorization头，移除错误的Content-Type设置即可：

add(data) {
  const headers = new HttpHeaders({
    Authorization: 'Bearer ' + localStorage.getItem('token')
  });
  return this.http.post(url, data, { headers });
}

额外说明（针对Angular HttpClient） #

如果你的HttpClient默认添加了Content-Type头，也可以显式删除它，确保浏览器自动处理：

add(data) {
  let headers = new HttpHeaders({
    Authorization: 'Bearer ' + localStorage.getItem('token')
  });
  // 移除Content-Type，让浏览器自动生成正确的multipart/form-data头
  headers = headers.delete('Content-Type');
  return this.http.post(url, data, { headers });
}

这样修改后，后端就能像之前一样正常读取FormData里的title和description字段了。

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