Angular接口在Chrome中出现“请求未完成”问题排查求助

我在Angular应用中调用GET接口 https://example.test.de/example-1/rest-api/persons，接口返回简单数据。Postman调用响应正常，Firefox打开Angular UI也能正常获取结果，但Google Chrome中打开应用时，接口经常无返回值，网络标签页显示 CAUTION: request is not finished yet!。尝试过Chrome隐身窗口排除缓存问题，依旧无效，且该问题在Chrome中随机出现，时好时坏。

更新说明：已将Rest端点返回类型从String改为Person列表，但问题仍未解决。

Angular服务代码 #

public getPersons(): Observable<Person[]> {
    const headers = {
      headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.keycloakService.getKeycloakInstance().token)
        .set('Content-Type', 'applciation/json') // 注意此处存在拼写错误
    };
    let url = this.getApplicationBaseUrl();
    url =
      url +
      '/example-1/rest-api/persons';
    return this.httpService.get<Person[]>(url, headers);
}

Java SpringBoot后端代码 #

@GetMapping(value = "/persons", produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public ResponseEntity<List<Person>> getPersons(@Context final HttpServletRequest httpServletRequest,
    @RequestHeader("Authorization") final String authorization) throws Exception {
  return ResponseEntity.ok().body(this.service.getPersons());
}

排查建议 #

• 修正请求头拼写错误：Angular代码中Content-Type的值写成了applciation/json，正确应为application/json。虽然GET请求一般不需要设置该头，但错误的头字段可能导致Chrome对请求的处理出现异常，优先修正此问题测试。
• 验证Token有效性：在Angular中请求发出前，打印当前Token值，确认每次请求携带的Token是否有效、格式是否正确。Chrome中可能存在Token获取时机或缓存的问题，导致部分请求携带无效Token。
• 检查Chrome环境：查看Chrome是否开启了代理、VPN、广告拦截或网络限速类插件，这类工具可能随机拦截或延迟请求，尝试禁用所有插件后测试。
• 增加后端日志：在SpringBoot接口中添加日志，记录请求到达时间、Authorization头内容、处理完成时间及返回数据长度，确认请求是否真的到达后端，以及后端是否正常完成响应。
• 确认Observable订阅：确保Angular组件中正确订阅了getPersons()返回的Observable（如使用subscribe()），未订阅的Observable不会触发实际请求（结合时好时坏的现象，此点可能性较低，但仍需确认）。
• 升级Chrome版本：尝试将Chrome更新到最新稳定版，旧版本可能存在特定的网络请求处理bug，导致此类随机异常。

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