typescript Angular 6：HttpErrorResponse SyntaxError：JSON 中的意外令牌

Angular 6: HttpErrorResponse SyntaxError: Unexpected token s in JSON

提问by user3701188

I am posting a request and I am suppose to receive a 'success' string back as response. I am getting an HttpResponseError with the following information posted in the image below.

我正在发布一个请求，我想收到一个“成功”字符串作为响应。我收到一个 HttpResponseError，其中包含下图中发布的以下信息。

PurchaseOrderService

采购订单服务

postPurchaseOrderCustom(purchaseOrderCustom: PurchaseOrderSaveCustom) {
 const url = `${this.localUrl}purchaseOrderCustom`;
 return this.http.post<String>(url, purchaseOrderCustom, {headers: this.header})
            .pipe(
                   catchError(this.handleError('postPurchaseOrderCustom', 'I am an error'))
                 );
  }

PurchaseOrderComponent

采购订单组件

this.purchaseOrderService.postPurchaseOrderCustom(purchaseOrderCustom).subscribe( response => {
  console.log("Testing", response);
  },
  error => {
    console.error('errorMsg',error );   
  }

The way I am doing it is the same way its done in the documentation. Do point out to me what I am doing wrong.

我这样做的方式与它在文档中的方式相同。请指出我做错了什么。

回答by malbarmavi

This related to your api respond type ,successis not valid json format,by default HttpClientis expected json response type and try to parse it later . You can solve this by set the respond type to textlike this

这与您的 api 响应类型有关，success不是有效的 json 格式，默认情况下HttpClient是预期的 json 响应类型，稍后尝试解析。您可以通过将响应类型设置为这样的文本来解决此问题

    return this.http.post<String>(url, purchaseOrderCustom, 
          {headers: this.header , responseType:'text'})
          .pipe (catchError(this.handleError('postPurchaseOrderCustom', 'I am an error')));

回答by Ojonugwa Jude Ochalifu

Like it has already been said, this has everything to do with the response coming from your server.

就像已经说过的那样，这与来自您的服务器的响应有关。

In my case, I had a Spring Boot application that returned this:

就我而言，我有一个返回此内容的 Spring Boot 应用程序：

return new ResponseEntity<>("Your SSN was generated successfully", HttpStatus.OK);

and this was the response I was getting on the Angular end:

这是我在 Angular 端得到的回应：

{error: SyntaxError: Unexpected token Y in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHtt…, text: "Your SSN was registered successfully."}

So what I did was create a custom CustomHttpResponseclass in my Spring Boot application and then changed the code in my controller to this:

所以我所做的是CustomHttpResponse在我的 Spring Boot 应用程序中创建一个自定义类，然后将我的控制器中的代码更改为：

        ...
        CustomHttpResponse customHttpResponse = new CustomHttpResponse();
        customHttpResponse.setMessage("Your SSN was registered successfully.");
        customHttpResponse.setStatus(HttpStatus.OK.value());

        return new ResponseEntity<>(new Gson().toJson(customHttpResponse), 
                                          HttpStatus.OK);
        }

Now I'm getting this:

现在我得到这个：

{message: "Your SSN was registered successfully.", status: 200}
   message: "Your SSN was registered successfully."
       status: 200

Essentially, this error occurs when Angular is expecting JSON but gets something else instead

本质上，当 Angular 期待 JSON 但得到其他东西时会发生此错误

回答by Rakesh Pandey

I was also facing same issue while getting pdf data buffer in response and I handled it in following manner, it's working for me

在获取 pdf 数据缓冲区作为响应时，我也遇到了同样的问题，我按以下方式处理它，它对我有用

server side

服务器端

pdf.create(output, options).toBuffer((err: any, buffer: any) => {
            if (err) reject(err);
           response.type('pdf');
response.send(buffer);
        });

in Angular Service downloadPdf(dateRange, labs){

在 Angular 服务下载 Pdf(dateRange, labs){

return this.httpClient.post(url, data,{responseType:'blob'});

} And in Component.ts file

在 Component.ts 文件中

downPdf1(){
    this.analyticService.downloadPdf(this.dateRange, this.labs).subscribe(
      res => this.extractPdf(res),
      (error:any) => throwError (error || 'Server error')
  );
  }

 extractPdf(res){
     let myBlob: Blob = new Blob([res], {type: 'application/pdf'}); 
     var fileURL = URL.createObjectURL(myBlob);
     window.open(fileURL);
 }