Richiesta http angolare 2 con Access-Control-Allow-Origin impostata su *

Question

Sto usando angular2 e typescript.

Sto tentando di pubblicare nella mia lista di abbonamenti per posta elettronica.

Il mio codice finora:

constructor(router: Router, http: Http){ 
     this.router = router; 

     this.http = http; 
     this.headers = new Headers(); 
     this.headers.append('Content-Type', 'application/json'); 
     this.headers.append('Access-Control-Allow-Origin', '*'); 
    } 

    subscribe =() => { 
     var url = "https://thepoolcover.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email; 
     this.isSuccess = false; 

     this.http.request(url, this.headers).subscribe(response => { 
      console.log(response); 
      this.isSuccess = true; 
     }); 
    } 

Questo è l'errore che ottengo nella mia console:

ottengo questo errore ora: SyntaxError Uncaught: imprevisto Token <

Codice di seguito:

export class Footer{ 
    email: string = ""; 
    router : Router; 
    http : Http; 
    jsonp: Jsonp; 
    isSuccess: boolean = false; 

    constructor(router: Router, jsonp: Jsonp, http: Http){ 
     this.router = router; 
     this.http = http; 
     this.jsonp = jsonp; 
    } 

    subscribe =() => { 
     var url = "https://thepoolcover.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email; 
     this.isSuccess = false; 

     this.jsonp.request(url).subscribe(response => { 
      console.log(response); 
      this.isSuccess = true; 
     }); 
    } 

Answer 1

Il Access-Control-Allow-Origin intestazione è qualcosa che dovrebbe essere presente nella risposta, non nella richiesta.

Se il servizio supporta CORS, è necessario restituirlo nelle intestazioni di risposta per consentire la richiesta. Quindi non è un problema della vostra applicazione angolare ma è qualcosa che deve essere gestita a livello di server-side ...

Se avete bisogno di maggiori dettagli, si potrebbe avere uno sguardo a questo link:

• comprensione e l'utilizzo CORS - http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• Debug CORS - http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/

Modifica

Sembra che thepoolcover.us10.list-manage.com non supporti CORS ma JSONP. Si potrebbe provare a refactoring il codice come descritto di seguito:

constructor(private router: Router, private jsonp: Jsonp){ 
} 

subscribe =() => { 
    var url = "https://thepoolcover.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email; 
    this.isSuccess = false; 

    this.jsonp.request(url, this.headers).subscribe(response => { 
    console.log(response); 
    this.isSuccess = true; 
    }); 
} 

Non dimenticare di specificare JSONP_PROVIDERS quando si chiama la funzione bootstrap.

Vedere questo link per maggiori informazioni:

• https://angular.io/docs/ts/latest/api/http/JSONP_PROVIDERS-let.html

Answer 2

Il problema è nel lato server. Devi dire al tuo servizio di accettare richieste GET. Per esempio, in JEE con la primavera è necessario aggiungere solo:

@CrossOrigin 
@RequestMapping(value = "/something", method = RequestMethod.GET)