错误：将XML数据作为JSON提取时，无法在Angular2中加载[object Object] / XMLHttpRequest

Question

我试图将XML数据作为JSON引入。这样做时，我收到以下错误：

XMLHttpRequest无法加载http://www.w3schools.com/xml/cd_catalog.xml。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:3000”访问。

此外，我的警报错误代码只是声明了[object Object]

HTTP-test.service.ts

import { Injectable } from 'angular2/core';
import { Http } from 'angular2/http';
import 'rxjs/add/operator/map';
import { AppComponent } from './app.component';

@Injectable()
export class HttpTestService{
  constructor (private _http: Http){}
  getData(){
    return this._http.get('http://www.w3schools.com/xml/cd_catalog.xml')
      .map(res => res.json());
  }

HTTP-test.component.ts

import {Component} from 'angular2/core';
import {HttpTestService} from './http-test.service';
import { AppComponent } from './app.component';

@Component({
  selector: 'http-test',
  template:`
    <button (click)="onTestGet()">Test GET Request</button><br>
    <p>Output:</p>
    <textarea id="txtOut" rows="45" cols="100">{{getData}}</textarea>
  `,
  providers: [HttpTestService]
})

export class HttpTestComponent{
  getData: any;
  postData: string;

  constructor (private _httpService: HttpTestService){}

  onTestGet(){
    this._httpService.getTeams()
    .subscribe(
    data => this.getData = JSON.stringify(data),
    error => alert(error),
    () => console.log("Finished")
    );
  }
}

当我从JSON格式的URL而不是XML中提取时，此代码有效。不确定是什么问题或我如何解决它。谢谢！

Answer 1

1. 这与您的角度应用程序无关，但事实上您的服务器响应中没有CORS标头。要证明这一点，请下载this plugin，您的应用将自动运行。这当然对用户不利，但在开发过程中可以省去一些痛苦。看起来你只是想学习东西，所以这可能只是一个可接受的用例。您也可以尝试使用与COR相关的其他API。

2. 不要警告错误。它们违反了Web最佳实践，大多数用户只会忽略/关闭它们，并且您已经注意到它们不显示对象或数组。我会建议console.error('Error! ', error)，以及某种闪存消息服务。但您可能还想查看浏览器中的网络标签。



您会注意到服务器实际上响应200 OK，但由于缺少标题，浏览器仍会阻止XHR。