Fehler: [object Object]/XMLHttpRequest kann nicht in Angular2 geladen werden, wenn XML-Daten als JSON

Question

abgerufen werden. Ich versuche, XML-Daten als JSON einzuziehen. Wenn ich dies tue, erhalte ich folgende Fehler:

XMLHttpRequest kann http://www.w3schools.com/xml/cd_catalog.xml nicht laden. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Ursprung 'http://localhost:3000' ist daher nicht erlaubt.

Auch mein Alarm Fehlercode nur besagt [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") 
    ); 
    } 
} 

Dieser Code funktioniert wenn ich von JSON-formatierten URLs, aber nicht von XML abrufe. Nicht sicher, was das Problem ist oder wie ich es beheben könnte. Vielen Dank!

Answer 1

1. Das hat nichts mit dem Winkel App, sondern um die Tatsache zu tun, dass es keine CORS Header in Ihrer Antwort vom Server. Um dies zu beweisen, laden Sie this plugin herunter, und Ihre App wird automatisch funktionieren. Dies ist natürlich nicht gut für die Benutzer, aber kann Ihnen einige Schmerzen während der Entwicklung ersparen. Es scheint, als ob Sie nur versuchen, Dinge zu lernen, so dass dies nur ein akzeptabler Anwendungsfall sein könnte. Sie können auch versuchen, eine andere API zu verwenden, die mit CORs reagiert.

2. Nicht mit Fehlern warnen. Sie verstoßen gegen die besten Praktiken im Web, die meisten Benutzer ignorieren/schließen sie einfach, und wie Sie bemerkt haben, zeigen sie keine Objekte oder Arrays an. Ich würde vorschlagen, console.error('Error! ', error), und eine Art von Flash-Messaging-Dienst. Vielleicht möchten Sie aber auch den Netzwerk-Tab in Ihrem Browser ausprobieren.

Sie werden feststellen, dass tatsächlich der Server mit einem 200 OK reagiert, sondern auch wegen der fehlenden Header der XHR noch Blöcke Browser.