Angular16如何向API传递JSON请求体？邮箱参数传递问题

核心问题出在Angular服务的请求传参逻辑上，当前代码没有正确传递邮箱数据到后端API，反而将请求头配置当成了请求体发送，同时参数格式不符合后端Dto的预期。

1. 修正Angular服务的subscribeEmail方法 #

原代码的错误点：

• http.post方法参数顺序错误：正确顺序是(url, 请求体, 请求配置)，你把请求配置当成了请求体
• 不必要地对邮箱字符串做JSON.stringify处理，Angular的HttpClient会自动处理对象序列化
• 没有构造符合后端NewsletterDto结构的请求体（后端接收的是包含Email字段的对象，不是单纯的字符串）

修改后的服务代码：

subscribeEmail(email: string) {
  const httpOptions = {
    headers: new HttpHeaders({
      Authorization: 'Bearer ' + sessionStorage.getItem('accessToken'),
      'Content-Type': 'application/json' // 显式指定Content-Type，确保后端正确解析请求体
    })
  };
  // 构造与后端NewsletterDto匹配的请求体，确保字段名（如Email）与后端一致
  const requestBody = { Email: email };
  return this.http.post(this.baseUrl + '/message/save', requestBody, httpOptions);
}

2. 确认后端Dto字段匹配 #

确保后端的NewsletterDto类包含对应字段，示例：

public class NewsletterDto
{
    public string Email { get; set; }
    // 其他字段（如果有）
}

3. 优化调用代码的错误处理（可选） #

当前调用时未处理请求错误，添加错误处理便于排查问题：

this.housingService.subscribeEmail(this.theEmail).subscribe({
  next: (res) => console.log('订阅记录保存成功', res),
  error: (err) => console.error('保存订阅失败', err)
});

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