Solicitud http de Angular 2 con Access-Control-Allow-Origin establecido en*

angular-http

Question

Estoy usando angular2 y mecanografiado.

Estoy intentando publicar en mi lista de suscripción de chimpancés.

Mi código hasta ahora:

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

Este es el error que recibo en mi consola:

Recibo este error ahora: Error de sintaxis no detectada: símbolo inesperado <

Código actual a continuación:

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

El encabezado Access-Control-Allow-Origin es algo que debería estar presente en la respuesta, no en la solicitud.

Si su servicio es compatible con CORS, debe devolverlo en los encabezados de respuesta para permitir la solicitud. Entonces, no es un problema de su aplicación Angular pero es algo que debe manejarse en el nivel del servidor ...

Si necesita más detalles, puede echar un vistazo a este enlace:

• Entender y usar CORS - http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• Depuración de CORS - http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/

Editar

Parece que thepoolcover.us10.list-manage.com no soporta CORS sino JSONP. Puede intentar refactorizar su código como se describe a continuación:

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

No olvide especificar JSONP_PROVIDERS al llamar a la función bootstrap .

Vea este enlace para más detalles:

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

Answer 2

El problema está en el lado del servidor. Tienes que decirle a tu servicio que acepte las solicitudes GET. Por ejemplo, en JEE con Spring debe agregar solo:

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