web-dev-qa-db-fra.com

Requête angulaire 2 http avec Access-Control-Allow-Origin défini sur *

J'utilise angular2 et TypeScript.

J'essaie de poster sur ma liste d'abonnement mail chimp.

Mon code jusqu'à présent:

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

C'est l'erreur que j'ai dans ma console:

 enter image description here

J'ai cette erreur maintenant: Uncaught SyntaxError: Jeton inattendu <

Code actuel ci-dessous:

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; 
        });   
  }
angularangular-http
16
AngularM

L'en-tête Access-Control-Allow-Origin est quelque chose qui devrait être présent dans la réponse, pas dans la demande.

Si votre service prend en charge CORS, il doit le renvoyer dans les en-têtes de réponse pour autoriser la demande. Ce n’est donc pas un problème de votre application Angular mais c’est quelque chose qui doit être géré au niveau du serveur ...

Si vous avez besoin de plus de détails, vous pouvez consulter ce lien:

Modifier

Il semble que thepoolcover.us10.list-manage.com ne supporte pas CORS mais JSONP. Vous pouvez essayer de refactoriser votre code comme décrit ci-dessous:

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

N'oubliez pas de spécifier JSONP_PROVIDERS lorsque vous appelez la fonction bootstrap.

Voir ce lien pour plus de détails:

20
Thierry Templier

Le problème est du côté du serveur. Vous devez dire à votre service d'accepter les demandes GET. Par exemple, dans JEE avec Spring, vous devez simplement ajouter:

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