Почему я получаю эту ошибку: SyntaxError: Неожиданный токен T в JSON в позиции 0 в JSON.parse (<anonymous>) в XMLHtt…,

Question

Я пытаюсь создать кнопку загрузки, которая позволяет пользователю загружать документ с моего сервера node.js.
Вот необычная кнопка:

Я использую Angular в качестве внешнего интерфейса, а node.js и express.js для внутреннего интерфейса.

Для внешнего интерфейса:

app.component.ts:

import { Component } from "@angular/core";
import { GenerateReportService } from "./services/generate-report.service";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private generateReportService: GenerateReportService) {}
  generateReportbyGet() {
    this.generateReportService.generateReportbyGet().subscribe(() => {
      console.log("generateReportbyGet ...");
    });
  }
}

app.component.html

<button  color="primary" (click)="generateReportbyGet()">Generate report By Get</button>
<router-outlet></router-outlet>

генерировать-report.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class GenerateReportService {
  uri = 'http://localhost:5353';
  constructor(private http: HttpClient) {}
  generateReportbyGet() {
    return this.http.get(`${this.uri}/generateReportByGet`);
  }
}

В бэкэнде у меня есть:

server.js

const bodyParser = require('body-parser');
const cors = require('cors')
const express = require('express');
const app = express();
const router = express.Router();
const path = require('path');
const createDocumentService = require('./services/generateDocumentService.js');

app.use(cors());
app.use(bodyParser.json());

router.route('/generateReportByGet').get((req, res) => {
        res.download(path.join(__dirname, 'docs/doc1.txt'), function (err) {
            if (err) {
                console.log(err);
                console.log('res.headersSent: ', res.headersSent);
              } else {
                console.log('NO ERROR');
                console.log('res.headersSent: ', res.headersSent);
              }
        });
});

app.use('/', router);

app.listen(5353, () => console.log('Express server running on port 5353'));

Doc1.txt

Когда я нажимаю на мою необычную кнопку, я получаю эту ошибку:

ошибка: {ошибка: SyntaxError: неожиданный токен T в JSON в позиции 0 в JSON.parse () в XMLHtt…, текст: «Это текст внутри doc1.txt, который я хочу, чтобы пользователь мог загрузить. "}
заголовки: HttpHeaders {normalizedNames: Map (0), lazyUpdate: null, lazyInit: ƒ} сообщение: «Ошибка Http во время анализа для http://localhost:5353/generateReportByGet" имя: "HttpErrorResponse"

Я проверил код бэкенда отдельно, написав

localhost::5353/generateReportByGet

в адресной строке. И файл успешно загружен.
Также, что странно, что

res.download()

не дает никаких ошибок.
Итак, вот мой вопрос:
1 / Что вызывает эту ошибку, я получаю на консоли браузера?
2 / Использование res.download () - неправильный способ сделать это?
Спасибо!!

Answer 1

Вам нужно обработать res.download на стороне клиента, установив responseType.

Изменить GET запрос в generate-report.service.ts как:

generateReportbyGet() {
  return this.http.get(`${this.uri}/generateReportByGet`, {responseType: ResponseContentType.Blob})
                .map((response: Response)=> response.blob());
}

В приложении.component.ts изменить generateReportbyGet как:

generateReportbyGet() {
  this.generateReportService.generateReportbyGet().subscribe((data) => {
    console.log("generateReportbyGet ...");
    // save blob in file
  });
}

Answer 2

Вам необходимо указать тип ответа при оформлении запроса. В противном случае Angular ожидает, что входящие данные будут json, и попытается их проанализировать.

 return this.http.get(`${this.uri}/generateReportByGet`, {responseType: 'text'});