Angular2: Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Herkunft 'null' ist daher nicht erlaubt

Question

Ich habe this gesehen, und ich habe ein paar Fragen.

Ich will die Antwort von diesem uri erhalten:

http://www.instagram.com/justinbieber/media/ 

und ich habe den folgenden Code für sie umgesetzt:

import {Http,Headers} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import {Component,Injectable} from '@angular/core'; 
import {Gallery} from './gallery';  

@Injectable() 
export class InstagramService{ 

    constructor(private _http:Http){    

    } 

    getGallery(username: string) : Observable<Gallery> { 

     return this._http.get("http://www.instagram.com/justinbieber/media/").map(res => res.json());                    
    } 
} 

Unfortunatlly, wenn ich diesen Service nennen es beschwert sich mit:

XMLHttpRequest cannot load https://www.instagram.com/justinbieber/media/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

So gibt es einige Fragen für mich:

1- Ich kann die Antwort von meinem Browser oder sogar postman bekommen, aber nicht in meinem Code. Was macht dieses Problem?

2 - Falls in meinem Code etwas nicht stimmt, geben Sie bitte Ihren Vorschlag an?

Hinweis: Diese URI unterstützt auch jsonp.get nicht.

Answer 1

Sie sollten stattdessen die Instagram-API verwenden, die JSONP unterstützt. Hier ist ein Beispiel:

constructor(private jsonp:Jsonp) { 
    let url = 'https://api.instagram.com/v1/tags/ootd/media/recent?client_id=someidnumbersxxxxxxxxxxxxxx&callback=JSONP_CALLBACK'; 
    jsonp.request(url, { method: 'Get' }) 
     .subscribe((res) => { 
     (...) 
     }); 
} 

Sehen Sie diese Fragen für weitere Informationen:

• instagram jquery ajax type="GET, can't get around CORS
• How to make a simple JSONP asynchronous request in Angular 2?