如何在Angular2中使用HTTP GET显示来自服务器的纯文本响应

我正在使用Windows 10上的

npm v5.0.0

和

node v8.0.0

使用

@Angular/cli

开发Angular-4（最新版本）

我设置了一个服务器，实际以纯文本给出响应

我有一个非常简单的界面，我所做的就是按下一个按钮，从我的服务器请求GET。我的目标是显示

服务器的工作状态 使用GET可以以纯文本形式为我提供一些文本

我的代码 我的组件称为

simplesearch

-- simplesearch/
               --simplesearch.component.ts
               --simplesearch.service.ts
-- app.component.ts
-- app.component.html
-- app.component.css
-- app.module.ts

simplesearch.component.ts：

import { Component } from '@angular/core';
import { SimplesearchService } from './simplesearch.service';
@Component({
   selector: 'app-simplesearch',
    template: `
    <button (click)="onTestGet()">GET Test</button>
    <p>{{getOutput}}</p>
    `,
    styles: [],
    providers: [SimplesearchService]
})
export class SimplesearchComponent {
  getOutput: string;

  constructor(private httpService: SimplesearchService) {}

  onTestGet() {
     this.httpService.getData()
      .subscribe(
        data => this.getOutput = data, // since data is plain-text
        error => console.log(error)
      );
  }
}

Mozilla Firefox控制台出错 在

XHR GET

请求之后，在按下按钮之后，我得到了错误

Object{\u body:error，status:0，ok:false，statusText:，headers:Object，type:3，url:null}

我假设这是我收到的JSON响应，因此代码中的

.JSON.stringify（data）

最后我还得到了

CORS标题“accesscontrolalloworigin”

。但是我已经在代码中添加了标题

我试着在URL上做了一个

curl

，结果很容易

---

我应该研究哪些必要的步骤或改进？

在服务器设置后，API可供使用，以便从前端发出跨源请求

另外，在我的案例中使用了在

this.getOutput=data

处进行的最终编辑，因为可用的格式是纯文本，并且将其绑定到

JSON.stringify（）

实际上会导致错误：

SyntaxError:JSON.parse:JSON数据第1行第1列的数据意外结束

---

将在“网络分析”下的调试器工具中可见

您应该设置服务器以接受CORS请求。这不能用客户端标题来完成。看起来您的请求根本没有成功，并不是说您无法从中提取纯文本。你能检查一下浏览器中的开发工具，看看是否从HTTP请求中得到了正确的响应吗？@AlexFlorin我查看了浏览器的开发工具，网络分析部分显示get请求得到了绿色符号，但在JSON的第1行第1列有一个错误数据表示响应内容协商失败。您是否已将服务器上的

Content-type

标题设置为

text/plain

而不是

application/json

？我建议阅读有关HTTP内容协商的文章。它主要以使用

application/json

类型为例，但相同的原则可用于任何其他格式。

import { Component } from '@angular/core';
import { SimplesearchService } from './simplesearch.service';
@Component({
   selector: 'app-simplesearch',
    template: `
    <button (click)="onTestGet()">GET Test</button>
    <p>{{getOutput}}</p>
    `,
    styles: [],
    providers: [SimplesearchService]
})
export class SimplesearchComponent {
  getOutput: string;

  constructor(private httpService: SimplesearchService) {}

  onTestGet() {
     this.httpService.getData()
      .subscribe(
        data => this.getOutput = data, // since data is plain-text
        error => console.log(error)
      );
  }
}

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()

export class SimplesearchService {
    private headers = new Headers();
    constructor(private http: Http) {
        this.headers.append('Allow-Control-Allow-Origin', '*');
        this.headers.append('Content-Type', 'text/plain');
     }

    getData(){
        return this.http
        .get('http://myserver.com:8090/detectMeaning?keyword=mail')
        .map(res => res.text());
    }
}