Angular 6: HttpErrorResponse SyntaxError: Unexpected token s in JSON答案

【问题标题】：Angular 6: HttpErrorResponse SyntaxError: Unexpected token s in JSONAngular 6: HttpErrorResponse SyntaxError: Unexpected token s in JSON
【发布时间】：2023-12-06 23:18:01
【问题描述】：

我正在发布一个请求，并且我想收到一个“成功”字符串作为响应。我收到一个 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 );   
  }

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

【问题讨论】：

这是给你的 api 响应的角度错误，http 对象默认尝试解析你的 api 响应它只看到纯文本这为什么抛出这个 cand 错误，在你的控制台中试试这个@ 987654327@如果你没有收到我的电话
要么在后端将您的回复用引号括起来，要么在前端将responseType 更改为“文本”
@user184994 在后端用引号括起来是什么意思，它已经在引号中，这使它成为一个字符串。那就是如果我让你写。如果你收到一个对象回来会发生什么
是的，但是您需要额外的引号，例如 `"\"success\""。如果您收到一个有效的 JSON 对象返回，则不会有任何问题，这取决于您说“一个对象”时的意思
@user184994 我使用 springboot 作为我的后端，通常当您发送一个对象时，它会被解析为 Json 并转换为 Angular 中的对应对象。那就是如果我是正确的。那么为什么它与字符串对象不同。

标签： angular rest typescript xmlhttprequest httpresponse

【解决方案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);
 }

【讨论】：