Angular 2 http Anfrage mit Access-Control-Allow-Origin auf *

Question

Ich benutze Angular2 und Typoskript.

Ich versuche, meine Mail Schimpansen-Liste zu posten.

Mein Code so weit:

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; 
     }); 
    } 

Dies ist der Fehler, den ich in meiner Konsole erhalten:

ich diesen Fehler jetzt: Uncaught Syntaxerror: unerwartete Token <

Aktueller Code unten:

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

Der Access-Control-Allow-Origin Header ist etwas, das in der Reaktion vorhanden sein sollte, nicht in der Anfrage.

Wenn Ihr Dienst CORS unterstützt, muss er ihn in den Antwortheadern zurückgeben, um die Anforderung zuzulassen. So ist es kein Problem Ihrer Angular Anwendung, aber es ist etwas, das auf der serverseitigen Ebene behandelt werden müssen ...

Wenn Sie weitere Informationen benötigen, können Sie einen Blick auf diesen Link haben:

• verstehen und nutzen CORS - http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• Debuggen CORS - http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/

bearbeiten

Es scheint, dass thepoolcover.us10.list-manage.com CORS nicht unterstützt, aber JSONP. Sie könnten versuchen, Ihren Code Refactoring, wie unten beschrieben:

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; 
    }); 
} 

nicht JSONP_PROVIDERS angeben Vergessen, wenn die bootstrap Funktion aufrufen.

Siehe diesen Link für weitere Informationen:

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

Answer 2

Das Problem in der Server-Seite ist. Sie müssen Ihren Dienst anweisen, GET-Anfragen zu akzeptieren. Zum Beispiel in JEE mit Frühling müssen Sie nur hinzufügen:

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