Angular邮件发送成功却报错：HttpErrorResponse解析失败求助

问题情况 #

邮件已成功发送，但前端始终进入错误回调，错误信息显示JSON解析失败：

modal.component.ts:361 Error sending email:
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: 'OK', url: 'http://localhost:3000/send-email', ok: false, …}
error: {error: SyntaxError: Unexpected token 'E', "Email sent"... is not valid JSON at JSON.parse (…, text: 'Email sent successfully'}
message: "Http failure during parsing for http://localhost:3000/send-email"

前端订阅代码：

this.emailService.sendEmail(this.name, this.email, this.message).subscribe(
      () => {
        console.log('Email sent!');
      },
      (error) => {
        console.error('Error sending email:', error);
      }
);

错误原因 #

Angular的HttpClient默认期望后端返回JSON格式响应，但你的后端返回的是纯文本Email sent successfully，导致HttpClient尝试将其解析为JSON时失败，进而触发错误回调——哪怕HTTP状态码是200（表示请求成功）。

修复方案 #

方案1：修改后端返回JSON格式 #

让后端返回标准JSON字符串，比如：

{"message": "Email sent successfully"}

同时确保响应头设置Content-Type: application/json。这样HttpClient能正常解析响应，自动进入成功回调。

方案2：修改Angular请求配置，接受纯文本响应 #

在emailService的sendEmail方法中，添加responseType: 'text'配置，告诉HttpClient不要解析JSON，直接返回文本：

// emailService中的sendEmail方法示例
sendEmail(name: string, email: string, message: string): Observable<string> {
  const requestBody = { name, email, message };
  return this.http.post(
    'http://localhost:3000/send-email',
    requestBody,
    { responseType: 'text' } // 指定响应为文本类型
  );
}

修改后，HttpClient会直接把后端返回的纯文本作为响应内容，进入成功回调。

获取错误状态 #

如果需要在错误回调中获取HTTP状态码，直接访问error.status即可：

(error) => {
  console.error('HTTP状态码:', error.status); // 此场景下会输出200
  console.error('Error sending email:', error);
}

内容的提问来源于stack exchange，提问作者Katerina Maria Gerakianaki