CODEWITHSUNDEEP
angulartypescriptangular6spring-restcontroller
Peter Penzov
Peter Penzov

Reputation: 1668

"SyntaxError: Unexpected token h in JSON at position 0

I want to make POST request from Angular client. I have this Spring endpoint:

    @RestController()
public class HomeController {

  @PostMapping(value = "/payment/{unique_transaction_id}", consumes = { MediaType.APPLICATION_JSON_VALUE }, produces = { MediaType.APPLICATION_JSON_VALUE })
  public ResponseEntity<WpfResponse> handleWpfMessage(@PathVariable("unique_transaction_id") String unique_transaction_id,
      @RequestBody WpfPaymentsDTO transaction, HttpServletRequest request) throws Exception {

    /// ....        
    return ResponseEntity.ok("http://some_domain.com/example");
  }
}

I use this typescript code:

save(main: MainForm, hash: string): void {
    this.http.post('http://localhost:8080/some_package/payment/ckjzqtyxh5pnavbjecujhuvzaa5q8n74', main, { headers }).subscribe();
  }

But when I make POST request I get:

    HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8080/some_package/payment/ckjzqtyxh5pnavbjecujhuvzaa5q8n74", ok: false, …}

"SyntaxError: Unexpected token h in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:13388:51)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2781:31)
    at Object.onInvokeTask (http://localhost:4200/vendor.js:54479:33)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2780:60)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2553:47)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2856:34)
    at invokeTask (http://localhost:4200/polyfills.js:4102:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4139:21)"

I get status OK but I can't find why I get this error message. Do you know how I can fix it?

Upvotes: 0

Views: 3632

Answers (2)

subodhkalika
subodhkalika

Reputation: 2237

You need to include { responseType: 'text' } in your headers. i.e.

  const headers = {
        responseType: 'text'
  }

  this.http.post('http://localhost:8080/some_package/payment/ckjzqtyxh5pnavbjecujhuvzaa5q8n74', main, { headers }).subscribe();

Late answer but can help others in future.

Upvotes: 3

Baris Bikmaz
Baris Bikmaz

Reputation: 401

I've no clue form spring but from your code it seems that you return JSON but the return value is string "http://some_domain.com/example" which is not JSON.

Upvotes: 1

Related Questions