Question

我正在使用@angular/cli和npm v5.0.0在Windows 10上使用node v8.0.0处理 Angular-4 （最新）。

我设置的服务器实际上以纯文本提供响应。

我有一个非常简单的界面，我所做的只是按一个按钮，并从我的服务器请求 GET 请求。我的目标是在<p></p>

之间显示纯文本

使用服务器

http://servername.com/detectMeaning?keyword=mail

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)
      );
  }
}

simplesearch.service.ts

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());
    }
}

Mozilla Firefox控制台出错

按钮推送后的XHR GET请求后，我收到错误

Object { _body: error, status: 0, ok: false, statusText: "", headers: Object, type: 3, url: null }

我认为这是我收到的JSON响应，因此我的代码中有.JSON.stringify(data)。

我最终也得到了CORS Header 'Access-Control-Allow-Origin'。但我已经在代码中添加了标题！

我尝试在网址上为curl做一个{ TransactionObject objTransaction = new TransactionObject(); try { //Create Order order.insert(objTransaction); //Create Delivery address.insert(objTransaction); //Call Generic Web API method to calculate TAX. using (HttpClient client = new HttpClient()) { client.BaseAddress = new Uri("http://localhost:85766/"); client.DefaultRequestHeaders.Accept.Clear(); client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json")); var response = client.PostAsJsonAsync("api/Tax/UpdateTax", order).Result; if (response.IsSuccessStatusCode) { //Commit transactio objTransaction.EndTransaction(true); } else { //Commit transactio objTransaction.EndTransaction(false); } } } } catch(Exception ex) { //Commit transactio objTransaction.EndTransaction(false); }，我很容易得到结果。

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

Answer 1

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

最后一次编辑在我的案例中使用this.getOutput = data，因为可用格式是纯文本并将其绑定到JSON.stringify()实际上会导致错误：

SyntaxError：JSON.parse：JSON数据第1行第1列的意外数据结尾

将在网络分析下的调试器工具中显示。

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

使用服务器

我的代码

Mozilla Firefox控制台出错

1 个答案: