2016-09-27 5 views
1

XMLデータをJSONとして取得しようとしています。その際、私は、次のエラーを取得:エラー:[オブジェクトオブジェクト]/XMLHttpRequestをXMLデータをJSONとしてプルするときにAngular2で読み込めません

XMLHttpRequestがhttp://www.w3schools.com/xml/cd_catalog.xmlをロードすることはできません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 Origin 'http://localhost:3000'はアクセスできません。

また、私の警告のエラーコードは、単に[オブジェクトのオブジェクト]

の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は取得しません。問題が何であるか、どのように修正するかは不明です。ありがとう!

+0

JSONPデータを取得した場合やサーバーがCORSヘッダーを使用している場合は機能します。それ以外の場合は、同じ起点ポリシーのために機能しません。 – adeneo

答えて

0
  1. これはあなたの角度のAppとは何の関係が、サーバーからのご回答にはCORSヘッダが存在しないという事実を持っていません。これを証明するには、this pluginをダウンロードすると、あなたのアプリケーションは自動的に動作します。もちろんこれはユーザーには良いことではありませんが、開発中に苦労することはありません。あなたは物事を学ぼうとしているようで、これはちょうど受け入れられるユースケースかもしれません。また、CORに応答する別のAPIを使用することもできます。

  2. エラーを報告しないでください。それらはウェブのベストプラクティスに違反し、ほとんどのユーザーは無視したり閉じたりします。気づいたように、オブジェクトや配列は表示されません。私はconsole.error('Error! ', error)と、ある種のフラッシュメッセージングサービスを提案します。しかし、あなたのブラウザのネットワークタブをチェックアウトすることもできます。

enter image description here

ためのヘッダーの不足のXHRをあなたが実際にサーバが200 OKで応答していることに気づくでしょうが、ブラウザがまだブロック。

+0

ありがとう!プラグインは完璧に動作しました! –

関連する問題