Angular调用Spring Boot接口遇HttpErrorResponse：JSON解析失败排查

后端核心错误 #

你的Spring Boot后端getAllClients方法存在致命问题：当查询到客户端列表后，未将数据作为响应体返回。

原代码中这一行：

return new ResponseEntity<>(HttpStatus.OK);

仅返回了200状态码，但未携带clientList数据。这会导致接口未返回预期的JSON数组，反而可能因项目视图解析器配置，返回了匹配的JSP/HTML模板内容（即你收到的包含<c:forEach>的HTML文本）。

修正后的后端代码 #

@RequestMapping("/")
public class ClientController {
    
    @Autowired
    private ClientRepo clientRepo;
    
    @GetMapping("/clients")
    public ResponseEntity<List<Client>> getAllClients() {
        try {
            List<Client> clientList = new ArrayList<>();
            clientRepo.findAll().forEach(clientList::add);
            
            if (clientList.isEmpty()) {
                return new ResponseEntity<>(clientList, HttpStatus.NO_CONTENT);
            }
            
            // 修正：将clientList作为响应体返回
            return new ResponseEntity<>(clientList, HttpStatus.OK);
            
        } catch (Exception ex) {
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
        }
        
    }   
}

前端相关调整 #

1. 恢复getClientsList的类型声明，确保接收JSON数据：

@Injectable({
  providedIn: 'root'
})
export class ClientService {
  private baseURL = "http://localhost:9090/clients";
  constructor(private httpClient: HttpClient) { }
  getClientsList(): Observable<Client[]>{
    return this.httpClient.get<Client[]>(this.baseURL)
  }
}

2. 组件标题建议修正（当前写的是Employee List，实际应为Client List）：

<h2>Client List</h2>
<table class = "table table-striped">
    <!-- 其余代码不变 -->
</table>

补充说明 #

你之前收到的HttpErrorResponse是因为前端期望JSON，但后端返回了HTML文本，导致JSON解析失败。修正后端接口返回数据后，前端就能正常解析并渲染列表了。

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