Angular 6: HttpErrorResponse SyntaxError: Unexpected token s in JSON

Posted 2023-02-27

【中文标题】Angular 6: HttpErrorResponse SyntaxError: Unexpected token s in JSON

【英文标题】：

【发布时间】：2019-01-06 02:26:09

【问题描述】：

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

PurchaseOrderService

postPurchaseOrderCustom(purchaseOrderCustom: PurchaseOrderSaveCustom) 
 const url = `$this.localUrlpurchaseOrderCustom`;
 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 );   
  

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

【问题讨论】：

这是给你的 api 响应的角度错误，http 对象默认尝试解析你的 api 响应它只看到纯文本这为什么抛出这个 cand 错误，在你的控制台中试试这个@ 987654327@如果你没有收到我的电话

要么在后端将您的回复用引号括起来，要么在前端将responseType 更改为“文本”

@user184994 在后端用引号括起来是什么意思，它已经在引号中，这使它成为一个字符串。那就是如果我让你写。如果你收到一个对象回来会发生什么

是的，但是您需要额外的引号，例如 `"\"success\""。如果您收到一个有效的 JSON 对象返回，则不会有任何问题，这取决于您说“一个对象”时的意思

@user184994 我使用 springboot 作为我的后端，通常当您发送一个对象时，它会被解析为 Json 并转换为 Angular 中的对应对象。那就是如果我是正确的。那么为什么它与字符串对象不同。

【参考方案1】：

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

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

【讨论】：

我必须添加为“json”。在它起作用之前，如果您可以编辑您的答案，那么我接受它。 headers: this.header, responseType:'text' as 'json')

你添加这个是为了让它工作吗responseType:'json'

这就是我所做的 headers: this.header , responseType:'text' as 'json') 。只是添加文本对我不起作用。从 Github 的讨论中，人们补充说要让它发挥作用

你用的是Http还是HttpClient？

我用的是HttpClient，顺便你知道这是为什么

【参考方案2】：

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

在我的例子中，我有一个 Spring Boot 应用程序返回：

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

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

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

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

        ...
        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);
        

现在我得到了这个：

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

本质上，这个错误发生在 Angular 期待 JSON 但得到其他东西时

【参考方案3】：

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

服务器端

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

在 Angular 服务中 下载PDF（日期范围，实验室）

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

并在 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);