首页 > 解决方案 > 为什么我会收到此错误:SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse () 在 XMLHtt…,

问题描述

我正在尝试创建一个下载按钮,使用户能够从我的 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`);
  }
}

在后端我有:

服务器.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

在此处输入图像描述

当我单击我的花哨按钮时,我收到此错误:

错误:{error: SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse () at XMLHtt..., text: “这是我希望用户能够下载的 doc1.txt 中的文本。”}
标头: HttpHeaders {normalizedNames: Map(0),lazyUpdate:null,lazyInit:ƒ} 消息:“ http://localhost:5353/generateReportByGet解析过程中的 Http 失败”名称:“HttpErrorResponse”

我已经通过编写单独测试了后端代码

localhost::5353/generateReportByGet

在地址栏中。并且文件被成功下载。
还有很奇怪的是

res.download()

没有给出任何错误。
所以这是我的问题:
1/ 是什么导致了该错误,我进入浏览器控制台?
2/ 使用 res.download() 的方法是错误的吗?
谢谢!!

标签: node.jsjsonangularexpresshttp

解决方案


您需要在发出请求时指定响应类型。否则 Angular 会期望传入的数据是 json 并尝试解析它。

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

推荐阅读