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. 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
    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 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
    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. 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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