Google Chrome Angular - CAUTION: request is not finished yet

Question

In my angular application I am calling the get endpoint: https://example.test.de/example-1/rest-api/persons

This endpoint is returning some simple data. In postman I can call the endpoint without any problems and I get a quick response. When I open the Angular UI in firefox, the endpoint is also returning quick results.

When I open the app in Google Chrome, the endpoint is never returning any value and in the network tab I can just see: CAUTION: request is not finished yet!

I thought maybe this is a caching issue so I opened a Google Chrome Inkognito tab, but there its also not working. However its getting even stranger: sometimes its working even in Google Chrome but sometimes not. It seems super random.

In the Angular Service I am doing this:

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);
}

The Java SpringBoot Backend:

@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());
  }

UPDATE: Rest Endpoint is now returning a list with the class Person instead of String, but this did not help.

Answer 1

Please post your 'httpService' source code. Also I've noticed that you have a typo in your 'Content-Type' header value:

.set('Content-Type', 'applciation/json')

Should be:

.set('Content-Type', 'application/json')

In the meantime you can try this:

public getPersons(): Observable<string[]> {
    const headers = new Headers({
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${auth_token}`
    });
    return this.http.get(apiUrl, { headers: headers });
}