Pourquoi une demande bloquée d'origine croisée avec un type tapé angulaire 2 ..?

Question

Je reçois l'exception "Cross-Origin Request Blocked" comme mentionné ci-dessous lors de l'accès au point de terminaison de l'api de repos via le tapuscrit Angular 2. J'essaie d'apprendre angulaire 2, S'il vous plaît aidez-moi à résoudre ce problème.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://xxxxxxxxx.com/place/countries. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). 

Ma classe de service est comme ci-dessous: -

import { Injectable } from '@angular/core'; 
    import { Headers, Response, Http } from '@angular/http'; 

    import 'rxjs/add/operator/toPromise'; 
    //import { Observable } from 'rxjs/Rx'; 

    import { Observable } from 'rxjs/Observable'; 
    import 'rxjs/add/operator/map'; 
    import 'rxjs/add/operator/do'; 

    import { HeaderOption } from '../model/header-option.component'; 
    import { Country } from '../model/country.component'; 

    import { BRAND_HEADERS, LEFT_HEADERS, HOME, PROFILE, LOGOUT, LOGIN} from './header-mock'; 

    @Injectable() 
    export class HeaderService { 
     private headers = new Headers({'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'}); 
     private countriesUrl = 'http://XXXXXXXXXXXXXXX.com/place/countries'; 

     constructor(private http: Http) {} 

     getCountries(): Observable<Country[]> { 
      //return this.http.get(this.countriesUrl, {headers: this.headers}).toPromise().then(response => response.json().records as Country[]).catch(this.handleError); 
      //return this.http.get(this.countriesUrl, this.headers).map((res:Response) => res.json()).catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
      return this.http.get(this.countriesUrl, this.headers).map((response: Response) => <Country[]> response.json()).do(data => console.log(JSON.stringify(data))); 
      } 

     private handleError(error: any): Promise<any> { 
      console.error('An error occurred', error); // for demo purposes only 
      return Promise.reject(error.message || error); 
     } 

     getBrand():HeaderOption{ 
      return BRAND_HEADERS; 
     } 
     getLeftHeader():HeaderOption[]{ 
      return LEFT_HEADERS; 
     } 


     getHomeLink():HeaderOption{ 
      return HOME; 
     } 
     getProfileLink():HeaderOption{ 
      return PROFILE; 
     } 
     getLogoutLink():HeaderOption{ 
      return LOGOUT; 
     } 
     getLoginLink():HeaderOption{ 
      return LOGIN; 
     } 
    } 

Answer 1

Si vous avez un nœud/app express vous devez permettre CORS:

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, 
    Content-Type, Accept"); 
    next(); 
    }); 

https://enable-cors.org/server_expressjs.html