SyntaxError: Unexpected token C in JSON at position 0

Question

I have this part of code in my application

addComment (body: Object): Observable<Comment[]> {
    //let bodyString = JSON.stringify(body); // Stringify payload
    let bodyString = JSON.parse(JSON.stringify(body || null ))
    let headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
    let options = new RequestOptions({ headers: headers }); // Create a request option

    return this.http.post(this.commentsUrl, bodyString, options) // ...using post request
                        .map((res:Response) => res.json()) // ...and calling .json() on the response to return data
                        .catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any
}   

When I try to add a comment in my application it throws an error as below:

POST http://localhost:4200/assets/comments.json 404 (Not Found)   
SyntaxError: Unexpected token C in JSON at position 0

Someone can help me?

Fully SyntaxError stack:

SyntaxError: Unexpected token C in JSON at position 0
    at Object.parse (<anonymous>)
    at Response.Body.json (body.js:24)
    at CatchSubscriber.selector (comment.service.ts:41)
    at CatchSubscriber.error (catch.js:104)
    at MapSubscriber.Subscriber._error (Subscriber.js:128)
    at MapSubscriber.Subscriber.error (Subscriber.js:102)
    at XMLHttpRequest.onLoad (xhr_backend.js:82)
    at ZoneDelegate.webpackJsonp.1301.ZoneDelegate.invokeTask (zone.js:363)
    at Object.onInvokeTask (ng_zone.js:264)
    at ZoneDelegate.webpackJsonp.1301.ZoneDelegate.invokeTask (zone.js:362)
    at Zone.webpackJsonp.1301.Zone.runTask (zone.js:166)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:416)

Answer 1

I was facing the exactly issue.

Just change:

error.json()

to

JSON.parse(JSON.stringify(error))

Answer 2

You might have echoed something that starts with C like Connected You should echo only json response and not any String in general!

Answer 3

I was having similar issues. I found out that return type function from spring boot was not supported in Angular. The return type of the function was ResponseEntity<String>.

return ResponseEntity.ok().body(new String("Some Message"));

I changed it to ResponseEntity<ResponseMessage> and modified the return as

return ResponseEntity.status(HttpStatus.OK).body(new ResponseMessage("Some Message"));

And it worked. The ResponseMessage class contained

  public class ResponseMessage {
  private String message;

  public ResponseMessage(String message) {
    this.message = message;
  }

  public String getMessage() {
    return message;
  }

  public void setMessage(String message) {
    this.message = message;
  }

}

Thanks to Stackoverflow community. This is my first Answer.