Angular页面获取API响应后无法跳转，请求排查JSON解析错误原因

• 核心问题：API响应格式与Angular HttpClient默认期望不匹配
  Angular的HttpClient默认会把服务器返回的响应当作JSON解析，但你的API在更新成功时返回的是纯文本字符串"Product Updated with succes"——这个内容不是有效的JSON格式（合法JSON的字符串必须被双引号包裹，或者返回JSON对象/数组）。当HttpClient调用JSON.parse()解析这段纯文本时，就会触发语法错误，因为开头的P不是JSON的合法起始字符（JSON起始应为{、[、数字、true/false/null或带引号的字符串）。

• 产品更新成功但页面不跳转的原因
  由于API响应格式不符合预期，HttpClient抛出错误，直接进入了subscribe的error回调分支，response回调里的this.router.navigateByUrl('/admin')代码根本没执行，所以页面不会跳转。

相关代码对比 #

API端当前返回（错误格式）

return Ok("Product Updated with succes");

这段代码返回的是text/plain类型的纯文本，而非application/json格式。

Angular端处理逻辑

this.shopService.updateProduct(this.productForm.value).subscribe(response => {
  this.router.navigateByUrl('/admin');
}, error => {
  console.log(error);
  this.errors = error.errors;
});

HttpClient默认尝试解析响应为JSON，纯文本无法被解析，因此直接进入错误回调。

可选修复方向 #

1. 修改API返回标准JSON：

   return Ok(new { message = "Product Updated with success" });
   

   返回JSON对象，让HttpClient能正常解析。
2. Angular端指定接收文本格式：
   在服务的请求方法中添加responseType: 'text'配置：

   updateProduct(productData: any) {
     return this.http.put('/api/products', productData, { responseType: 'text' });
   }
   

   这样HttpClient会直接返回文本，不再尝试JSON解析。

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