Angular 2 Http Always return XML in Firefox, must be JSON

Question

I am trying to call the Web Api endpoint from Angular 2. In IE and Chrome, everything works fine, but in Firefox I get a json parsing error. I think it returns XML instead of Json. I thought setting a content type would eliminate this. Is my code correct? Any ideas?

    let _tileUrl = XXX;

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this._http.get(_tileUrl, options)
        .map((response: Response) => <ITile[]>response.json())
                 .catch(this.handleError);

Answer 1

I think the header should be used instead Accept:

let headers = new Headers({ 'Accept': 'application/json' });
let options = new RequestOptions({ headers: headers });

return this._http.get(_tileUrl, options)
    .map((response: Response) => <ITile[]>response.json())
             .catch(this.handleError);

The header Content-Typedescribes the type of content you submit. Acceptcontent expected in response ...

Answer 2

, HTTP-, RequestOptions , :

import { RequestOptions, BaseRequestOptions } from "@angular/http";

...

class AppBaseRequestOptions extends BaseRequestOptions {
    // Overriding Accept so that Firefox will correctly get JSON 
    // responses from the server rather than XML.
    public headers: Headers = new Headers({
        "Content-Type": "application/json",
        "Accept": "application/json"
    });
}

bootstrap(AppRoot, [ ...
     { provide: RequestOptions, useClass: AppBaseRequestOptions }
]);