Angular2 rest api 透過 http.post 在firefox上面 Response.json()產生JSON.parse: unexpected character錯誤問題。

環境：

1. Browser :  firefox  50.0.2
2. angular2 :  2.1.0
3. angular-cli: 1.0.0-beta.20-4
4. node: 4.4.3
5. os : linux x64 Kubuntu 16.04
6. Rest Api Server： Django 1.9 + django restframework 3.4.7

首先本人在撰寫Angular2 的小專案遇到一個就是在Firefox上面透過Observable 的subscribe後 Rest api的 response內容在 Observable.map()內的method response.json()會產生錯誤。

呼叫 http.post service的 code 為

    getUserList(): Observable {
        // post rest api
        let headers = new Headers({ 'Content-Type': 'application/json'});
        let options = new RequestOptions({ headers: headers });
        return this.http.post(
                this.url.userListUrl,
                '',
                options
            )
            .map(
                (res: Response) => res.json()
            ).catch(this.handleError);
    }

這邊按照angular2官網說明的post是這樣子下。

 但是你會發現在 Chrome上面 Server 回傳的內容是能夠正常透過angular Response提供的.json() method轉成 json物件。不過到了Firefox則出現錯誤。

 

然後仔細去看Server回給Firefox的內容卻是 HTML！！



 

後來比對Chrome送出的header與response的內容發現兩邊的差別在於Header部份Accept 為application/json。
所以解決方式就是在發 http.post那邊的header多加上 'Accept': 'application/json' 就可以讓Firefox可以拿到正常的response 內容：

    getUserList(): Observable {
        // post rest api
        let headers = new Headers({ 'Content-Type': 'application/json', 'Accept': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this.http.post(
                this.url.userListUrl,
                '',
                options
            )
            .map(
                (res: Response) => res.json()
            ).catch(this.handleError);
    }

這個問題卡了好久，希望有遇到這個問題的人可以試試看。