1

Haciendo una aplicación con MySql, spring boot y angular 4, he implmentado los servicios de guardar, modificar y eliminar, ahora he estado trabajando para hacer el de contar las filas de la tabla. Mi servicio injectable en angular es el siguiente:

 public countUsers(): Observable<any> {
      return this.http.get("http://localhost:8080/CountUsers")
                  .map((res: Response) => res.json());
    }

Y en el componente lo llamo de la siguiente forma:

public countUsersFromService():void {
        this.userService.countUsers().subscribe(val =>{
          console.log("LA consola dice: " +val);
        });
  }

Aunque ya he usado la anotación:

@CrossOrigin(origins = "*", methods = {RequestMethod.GET, RequestMethod.POST}) 

en el controlador, sigo teniendo el mensaje de error...

Access to XMLHttpRequest at 'http://localhost:8080/CountUsers' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Pero solo para el recién implementado método CountUsers, que valga decir ya he probado con postman y funciona correctamente. Realmente no se que más hacer, agradecería cualquier ayuda. Gracias de antemano..

1 respuesta 1

0

Es tu navegador quien está bloqueando el acceso, debido a la Política Same-origin, ya que estás intentando acceder a http://localhost:8080, que es un dominio diferente a http://localhost:4200.

Hay varias soluciones para esto, por ejemplo usar un proxy. Una solución rápida es lo que se explica en este post: usar Chrome con la política Same-origin desactivada. Para Windows, los pasos son:

  • Click derecho en el escritorio, nuevo -> Acceso directo.
  • En la ubicación del elemento, pon: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp (quizás lo tengas que cambiar si tu Chrome está instalado en otro sitio).
  • A la hora de usarlo, es posible que lo tengas que abrir como administrador.

Advertencia: por seguridad, usa este acceso directo solo para desarrollar tu aplicación, ya que el flag --disable-web-security hace al navegador más vulnerable a diferentes tipos de ataques.

3
  • Hola. Pude solucionar esa parte pero aun no logro recuperar en angular el valor que me devuelve el servicio de spring, al parecer es un problema con los Observables. Quedo atento a cualquier sugerencia.. el 23 mar. 2019 a las 16:42
  • No veo nada mal en tu código. Quizás puedes abrir una nueva pregunta si sigues atascado y proporcionar más información, por ejemplo capturas de lo que ves en la pestaña 'network' de Chrome. Si te sirvió la respuesta te agradecería que la marcaras como solución aceptada. el 23 mar. 2019 a las 17:31
  • Modifiqué el servicio de la siguiente forma: public countUsers(): Observable<any> { return this.http.get("localhost:8080/countUsers"); } Y en mi componente: public countUsersFromService(): void { var num; this.userService.countUsers().subscribe( result => { console.log("consola: " + result.data) } ) } Pero result.data lo imprime como undefined, es decir, no está capturando el valor del número de registros de la tabla, que es lo que necesito. el 24 mar. 2019 a las 16:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.