HTTPClient POST пытается проанализировать ответ не в формате JSON

Question

Я пытаюсь сделать запрос в Angular, и я знаю, что HTTP-ответ будет не в формате JSON , а в текстовом виде.Однако Angular, похоже, ожидает ответа JSON, поскольку ошибка следующая:

SyntaxError: Неожиданный токен <в JSON в позиции 0 в JSON.parse () в XMLHttpRequest.c </p>

А также

Ошибка Http при синтаксическом анализе для http://localhost:9...

Этот метод записи:

return this.http.post(this.loginUrl, this.createLoginFormData(username, password), this.httpOptions)
  .pipe(
    tap( // Log the result or error
      data => console.log(data);
      error => console.log(error)
    )
  );

изаголовки.

private httpOptions = {

  headers: new HttpHeaders({
    'Accept': 'text/html, application/xhtml+xml, */*',
    'Content-Type': 'application/x-www-form-urlencoded',
    responseType: 'text'
  },

) };

Я думал, что responseType: 'text' будет достаточно, чтобы Angular ожидал ответа не в формате JSON.

Answer 1

Если вы просто хотите получить простой текст.Вы можете установить опцию Http без заголовка.

this.http.get("http://localhost:3000/login",{responseType: 'text'})
.subscribe((result)=>console.log(result))

Answer 2

Этот код, наконец, сработал для меня, чтобы загрузить файл PDF (Angular 6 / Laravel 5.6).Специальность для загрузки файла PDF против текстового файла была 'responseType': 'blob' as 'json'

showPdf(filename: String){
  this.restService.downloadFile(
     'protected/getpdf',
     {'filename': filename}
  )
}

//method from restService
public downloadFile(endpoint:String, postData:Object){

  var restService = this

  var HTTPOptions = {
     headers: new HttpHeaders({
        'Accept':'application/pdf'
     }),
     'responseType': 'blob' as 'json'
  }

  this.http.post(this.baseurl+endpoint,postData,HTTPOptions )
  .subscribe(
     res => {
        console.log(res) //do something with the blob
     },
     error => {
        console.error('download error:', error)
     }, 
     () => {
        console.log('Completed file download.')
     }
  )
}

Я нашел решение через ответ Кирка Ларкинса (спасибо большое!) И длинную угловую тему выпуска github https://github.com/angular/angular/issues/18586#issuecomment-323216764

Answer 3

Ниже приведен вызов от компонента, который загружает большой двоичный объект, совместимый с IE и chrome:

    this.subscribe(this.reportService.downloadReport(this.reportRequest, this.password), response => {
        let blob = new Blob([response], { type: 'application/zip' });
        let fileUrl = window.URL.createObjectURL(blob);
        if (window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.zip');
        } else {
            this.reportDownloadName = fileUrl;
            window.open(fileUrl);
        }
        this.spinner = false;
        this.changeDetectorRef.markForCheck();
    },
    error => {
        this.spinner = false;
    });

Ниже приведен метод обслуживания, который определяет тип ответа «blob»

downloadReport(reportRequest: ReportRequest, password: string): Observable<any> {
    let servicePath = `${basePath}/request/password/${password}`;
    this.httpOptions.responseType = 'blob';
    return this.endpointService.post(endpoint, servicePath, reportRequest, this.httpOptions);
}

Ниже приведен код вызова httpClient:

    //Make the service call:
    let obs = this.httpClient.request(method, url, options);
    //Return the observable:
    return obs;

Answer 4

Вы поместили responseType: 'text' в неправильный раздел вашего httpOptions - Он должен находиться снаружи из headers, вот так:

private httpOptions = {
  headers: new HttpHeaders({
    'Accept': 'text/html, application/xhtml+xml, */*',
    'Content-Type': 'application/x-www-form-urlencoded'
  }),
  responseType: 'text'
};

С тем, что выРанее на сервер отправлялся заголовок запроса responseType, а не просто указание Angular фактически обрабатывать ответ как текст.