1

Estimada gente buenos días, Desarrolle mi prueba de angular enlazado con spring boot en maven, alojandola en un servidor local, recupera bien los datos de manera local tal como muestro la pantalla. La aplicación angular y el enlace a mi maven Imagen Angular alojado en servidor local con direccion http://localhost/ejemplo o http://192.168.1.33/ejemplo Aplicación angular

Imagen json alojado en servidor local con direccion http://192.168.1.33:8080/ejemplo03/usuarios Recupero los datos de mi maquina el cual su ip es como se muestra en la imagen

Pero cuando ingreso desde otra máquina en mi red o desde mi celular en la red wifi no me muestra datos tal como se muestra la imagen, pero si puedo ver la información ingresando desde mi celular u otra pc a la dirección ip de mi servidor local con puerto 8080 Imagen de celular

Entonces cual puede ser mi problema adjunto codigo de enlace de servicio a mi ip de máquina con puerto 8080 lo agradeceria de antemano

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Usuario } from '../Modelo/Usuario';
import { identifierModuleUrl } from '@angular/compiler';

@Injectable({
  providedIn: 'root'
})
export class ServiceService {




 constructor(private http:HttpClient) { }
  //la url hace referencia al proyecto backend
  // usuarios es la lista que recuperar de backend
  Url='http://192.168.1.33:8080/ejemplo03/usuarios';

  getUsuarios(){
    //este codigo obtenemos todos los datos de backend
    return this.http.get<Usuario[]>(this.Url);

  }
  createUsuario(usuario:Usuario){
    return this.http.post<Usuario>(this.Url,usuario);

  }
  getUsuarioId(id:number){
    return this.http.get<Usuario>(this.Url+"/"+id);
  }
  updateUsuario(usuario:Usuario){
    return this.http.put<Usuario>(this.Url+"/"+usuario.id,usuario);
  }
  deleteUsuario(usuario:Usuario){
    return this.http.delete<Usuario>(this.Url+"/"+usuario.id);

  }
}
5
  • Necesitaríamos acceso a la consola de depuración de Javascript. ¿Te sale algún error? A primera vista si no tienes bien las cabeceras CORS se negará la llamada a esa URL. Por norma general los navegadores hacen una excepción con localhost, pero no con URLs externas. Commented el 17 abr. 2020 a las 16:43
  • @OscarGarcia, gracias por la respuesta, si acabo de ver la consola y este mensaje que me muestra Access to XMLHttpRequest at '192.168.1.33:8080/ejemplo03/usuarios' from origin '192.168.1.33' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    – Cralitros
    Commented el 17 abr. 2020 a las 17:01
  • Lo que necesitas arreglar debe agregarse en el código de spring para permitir conexiones externas o bien montar un reverse proxy que una la aplicación angular y spring bajo el mismo origen (URL). Si lo haces en spring sigue esta guía: spring.io/guides/gs/rest-service-cors Commented el 17 abr. 2020 a las 17:22
  • 1
    @OscarGarcia Gracias! modifique en mi servidor spring puse asi @CrossOrigin(origins = "*", methods= {RequestMethod.GET,RequestMethod.POST}, maxAge =3600 ) y con eso funciona sos un grande
    – Cralitros
    Commented el 17 abr. 2020 a las 17:38
  • Redacta tú mismo la respuesta y márcala como respuesta correcta para que ayude a otros usuarios y yo mismo te doy un +1. Commented el 17 abr. 2020 a las 19:09

1 respuesta 1

0

Colocar en el controlador del servicio

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

Caso contrario colocar debajo del main del servicio, el cual da todos los permisos de acceso a CORS

@SpringBootApplication
public class Ejemplo03Application extends SpringBootServletInitializer {
    public static void main(String[] args) {
    ...
    }
    @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurerAdapter() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {

                    registry.addMapping("/**").allowedOrigins("*"); //  /** significa todos los URL mapeados, y * para todos los dominios

                }
            };
        }
}

Tu Respuesta

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

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