Angular 2

Chcę pobrać dane z API z innej domeny niż moja:

this.http.get('https://innadomena.pl/' + this.name).subscribe(data => {
console.log(name, data);
});

Jednak przeglądarka wyrzuca mi błąd "Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „...”. (brakujący nagłówek CORS „Access-Control-Allow-Origin”)". Próbowałem również jsonp, nie pamiętam dokładnie błędu ale było to związane z jakimś callbackiem. Jak rozwiązać problem pobrania danych z API? Powinienem dodać jakiś nagłówek do żądania http, który pyta serwer czy zgadza się na żądanie z danej domeny?

Dodam jeszcze, że API podczas testu w Postman zwraca w nagłówku "access-control-allow-origin →*". Dlaczego GET w Angularze 4 nie powoduje, że serwer zwraca ten nagłówek?

Trzeźwy Samiec napisał(a):

this.http.get('https://innadomena.pl/' + this.name).subscribe(data => {
console.log(name, data);
});

nie pomieszałeś czasem AngularJS z Angularem2?

Nie. To serwer musi zwrócić taki nagłówek. Czyli ta innastrona.pl musi ten nagłówek zwracać, że żądania z Twojej strony są zezwolone.

Ok, ale serwer zwraca prawidłowy nagłówek jeżeli żądanie wyślę z Postmana. Zauważyłem, że serwer zwraca 301 gdy żądanie idzie z aplikacji Angulara.

Dobra, znalazłem rozwiązanie. Należy przerobić kod z:

this.http.get('https://innadomena.pl/' + this.name).subscribe(data => {
console.log(name, data);
});

na:

this.http.get('https://innadomena.pl/' + this.name +** '/'**).subscribe(data => {
console.log(name, data);
});

Na czym polega różnica? Po prostu adres "https://innadomena.pl/NAME" przekierowywał mnie na adres "https://innadomena.pl/NAME**/**", który zgodnie z zasadami jest zupełnie innym adresem. Tak więc, zamiast 200 OK, otrzymywałem 301. Przeglądarka dodatkowo wyświetlała błąd związany z CORS, ponieważ odpowiedź z 301 nie zawierała w sobie odpowiedniego nagłówka. Głupi błąd, mam nadzieję, że ten post oszczędzi wam w przyszłości wiele czasu jeżeli natraficie na podobny problem.