Solvedangular HttpClient fails to parse an empty 200 response in IE11

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

The HttpClient throws an error "Http failure during parsing for ..." in the case of an empty 200 response in IE11.
The issue is not reproducible in Chrome and Firefox.
Setting a responseType option to "text" helps to resolve the issue.

Expected behavior

IE11 returns null by analogue with other browsers.

Minimal reproduction of the problem with instructions

Make an HttpClient.get request to an endpoint with the an empty file in IE11.
See this plunker for an example.

What is the motivation / use case for changing the behavior?

It is expected to have a consistent behavior across all browsers.

Environment

Angular version: 4.3.4

Browser:

  • Chrome (desktop) version XX
  • Chrome (Android) version XX
  • Chrome (iOS) version XX
  • Firefox version XX
  • Safari (desktop) version XX
  • Safari (iOS) version XX
  • IE version 11
  • Edge version XX

For Tooling issues:

  • Node version: 6.10
  • Platform: Windows
52 Answers

✔️Accepted Answer

For my error, I was able to fix the problem by setting the responseType: to 'text' in the options. This stopped the HttpClient from trying to parse the empty response as a JSON object. (just realised this was mentioned in the initial bug submission.)

this.http.put(
     url,
     data,
     {
        headers: new HttpHeaders().set('Content-Type', 'application/json'),
        responseType: 'text' 
     }
  ).subscribe(  ....   );

This appears to work in Chrome and Edge.

Other Answers:

I get the exact same error in Chrome desktop v60.

For what I'm working on, it's not an option to change the response codes the server sends, so I have to tolerate 200 and 201 responses with empty bodies. I don't want to set responseType: text on the request because then I have to manually parse the JSON in any error responses, and regardless I don't want to have to make a code change for each request where this is now a problem.

For now my workaround is an HttpInterceptor that catches errors when the status code is in the 200 range and returns an HttpResponse with a null body instead (just like HttpClient does with 204 Not Content responses):

@Injectable()
export class EmptyResponseBodyErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req)
      .catch((err: HttpErrorResponse) => {
        if (err.status >= 200 && err.status < 300) {
          const res = new HttpResponse({
            body: null,
            headers: err.headers,
            status: err.status,
            statusText: err.statusText,
            url: err.url
          });

          return Observable.of(res);
        } else {
          return Observable.throw(err);
        }
      });
  }
}

@snakenstein See brentos99 comment. Just add responseType:

    return this.http.post('api/groups', group, {
      responseType: 'text',
    });

@thetric I saw this workaround, but It is not suitable for me.
I have a .net api with a lot of methods which returns an empty 200 response. And I use swagger and NSwagStudio which generates typescript client for this api.
So, I can't change the way NSwagStudio generates code for calling http.post(...). Of course, I can manually change particular method calls. But this is not a practical solution.
Thats why I wondering if there any plans on solving this issue (not a workaround).

More Issues: