1

Tengo un problema de CORS que no tengo idea de donde proviene, estoy creando un servicio REST en JavaEE (Glassfish) y tengo como Front una app Angular consumiendo el mencionado servicio, estoy probando la autenticación por token con la librería JJWT, hasta ahora he creado el Token y demás operaciones de token y no he tenido problema, la app angular hace peticiones al servicio y este responde, PERO, no estoy enviando el token en la cabecera y eso es porque cada vez que creo un HttpHeaders en angular y lo agrego a la petición Http el servidor me devuelve un error de CORS.

Mi codigo Angular es el siguiente:

getProductoIndividual():Observable<any>
{
     console.log("getProductoIndividual", 'Authorization' + ':'  + 'Bearer ' + localStorage["clave"]);

     const header = new HttpHeaders({
                   'Authorization' : 'Bearer ' + localStorage["clave"]
                   });

     return this.http.get("http://localhost:8080/PruebaCuatro/api/persona/3", { headers : header });
 }

Si elimino el segundo parámetro de la operación GET, entonces la petición funciona perfecto, pero si lo dejo como lo aprecian alli, el servidor me arroja error de CORS.

Mi codigo JavaEE es el siguiente:

@GET
@Path("{id}")
@Produces({MediaType.APPLICATION_JSON})
public Response findModificado(@PathParam("id") Long id, @Context             HttpHeaders headers) throws UnsupportedEncodingException
{

    String jwt = "TTOOKKEENN";
    JsonObject json;
    List<String> authorizationHeader = headers.getRequestHeader("Authorization");

    String authString = null;

    if(authorizationHeader == null  || authorizationHeader.isEmpty())
    {
        authString = "NULO";            
    }
    else
    {
        authString = authorizationHeader.get(0);        
    }

    String email = null;
    String sujeto = null;
    Date iat = null;
    Date exp = null;

    try
    {

         Jws<Claims> claims = Jwts.parser().setSigningKey("mi_clave").parseClaimsJws(jwt);

         sujeto = claims.getBody().getSubject();             
         email = claims.getBody().get("email", String.class);
         iat = claims.getBody().getIssuedAt();
         exp = claims.getBody().getExpiration();

         json = Json.createObjectBuilder().add("email", email)
                                            .add("sujeto", sujeto)
                                            .add("iat", iat.toString())
                                            .add("exp", exp.toString())
                                            .add("Authorization", authString)
                                            .build();

    } catch(SignatureException e)
    {
        json = Json.createObjectBuilder().add("LLAVE_ERRONEA", "La firma no correponde").build(); 
    }  
    catch(ExpiredJwtException e)
    {
        json = Json.createObjectBuilder().add("LLAVE_ERRONEA", "La llave expiro").build();            
    }

 return Response.status(Response.Status.CREATED).entity(json)
                    .header("Access-Control-Allow-Origin", "*").build();

 }

CONSIDERACIONES: Evidentemente la cadena TTOOKKEENN no esta realmente en el código, en mi código si hay un token real, lo aclaro pero eso no forma parte de la problemática realmente. Estoy utilizando el servidor GlassFish y no estoy utilizando ningún framework JavaEE, ABSOLUTAMENTE NINGÚN FRAMEWORK, es simplemente código JavaEE y que fue generado en su mayoría por Netbeans y yo lo he modificado, tiene conexión JPA pero eso es otra historia. Tampoco estoy utilizando maven.

También intente utilizar en angular un interceptor pero obtuve el mismo resultado (error CORS).

La Advertencia que obtengo del servidor es la siguiente:

Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://localhost:8080/PruebaCuatro/api/persona/3. (Razón: Cabecera CORS 'Access-Control-Allow-Origin' no presente)

Donde debería ir Access-Control-Allow-Origin ? la pregunta parece tonta, pero es que ya no se que mas hacer y como los sabios dicen que no hay preguntas tontas sino tontos que no preguntan pues allí también les dejo esa.

Espero me puedan ayudar. A mi parecer el problema esta en el header angular, los leo.

Por cierto, cuando ejecuto la misma API URL con el mismo parámetro Authorization seteado al Bearer TTOOKKEENN en POSTMAN u otros software para probar API REST entonces si funciona como debe ser, por eso mi teoría de que el problema esta en Angular.

Evidentemente debo solucionar el problema para poder implementar la autenticación por Token en el sistema.

Las Librerías que utilizo en JavaEE son:

  • jersey-bundle-1.19.1.jar
  • jackson-all-1.9.0.jar
  • jjwt-0.6.0.jar

4 respuestas 4

3

Tienes dos opciones, implementar CORS en tu servidor o usar un proxy inverso. La opción primera está explicada por @cjara, así que no profundizaré por ahí.

La segunda opción, que es la que me gusta más (es la que uso tanto en desarrollo como en producción) se basa en que el servidor de contenido estático haga de pasarela para las llamadas REST. Te presento en escenario para que lo entiendas fácilmente:

  • Tienes un servidor web con tu HTML, Javascript y demás archivos de tu aplicación Angular. Puede ser Apache, Nginx o similares. Este servidor usa los puertos estándar (80 para http y 443 para https).

  • Tienes un servidor J2EE (digamos un Glassfish) escuchando por el puerto 8080 para servir recursos REST.

  • Configuras el servidor web para que cualquier petición que tenga empiece por /api sea remitida al puerto 8080 de la misma máquina.

En el entorno de desarrollo

Simplemente crea en la raíz de tu proyecto Angular (donde se encuentre el fichero package.json) un fichero llamado proxy.conf.json con el siguiente contenido:

{   
  "/api": {
    "target": "http://localhost:8080/PruebaCuatro",
    "secure": false
  }
}

Y cuando levantes el servidor, en lugar de

ng serve

pon

ng serve --proxy-config proxy.conf.json --host=0.0.0.0

En producción (ejemplo)

Usando Nginx sería algo como:

    upstream backend {
        server localhost:8080;
    }

    location /api/ {
        proxy_pass http://backend/PruebaCuatro/api/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_set_header Origin "";
    }

Por tanto, si tu aplicación Angular se descarga cuando un usuario entra a https://midominio.com/index.html, cualquier llamada al API REST debería hacerse mediante una URL como https://midominio.com/api/mi-recurso, que el servidor proxy redirigirá internamente a http://localhost:8080/PruebaCuatro/api/mi-recurso.

Con esto obtienes dos ventajas:

  • Para el cliente todo es transparente y sólo existe un canal de comunicación, simplificando la configuración de firewalls y routers.
  • Puesto que todo tiene un mismo origen (único dominio web con un único puerto), el navegador no requiere el uso del protocolo CORS.
3

Es necesario que habilites la opción CORS en tu API REST.

@Provider
public class CorsFilter implements ContainerResponseFilter {
@Override
public void filter(ContainerRequestContext requestContext, 
  ContainerResponseContext responseContext) throws IOException {
      responseContext.getHeaders().add(
        "Access-Control-Allow-Origin", "*");
      responseContext.getHeaders().add(
        "Access-Control-Allow-Credentials", "true");
      responseContext.getHeaders().add(
       "Access-Control-Allow-Headers",
       "origin, content-type, accept, authorization");
      responseContext.getHeaders().add(
        "Access-Control-Allow-Methods", 
        "GET, POST, PUT, DELETE, OPTIONS, HEAD");
 }
} 

Te dejo un enlace que te puede ser de utilidad CORS-JAX-RS

1

En tu clase de configuración o donde usas la extensión de WebSecurityConfigurerAdapter agrega los siguiente métodos.

@Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://localhost:4200");

            }           

        };          
    }


    @Override
    public void configure(WebSecurity web) throws Exception {
        super.configure(web);
    }  
1
  • Creo que me haz salvado la vida. Commented el 16 sept. 2022 a las 3:58
1
  • ¿Estás utilizando Spring?
  • ¿Has probado con la etiqueta @CrossOrigin en tu controlador?

En la mayoría de los proyectos, empezamos permitiendo acceder al recurso desde cualquier lugar, y por ejemplo para métodos GET o POST, lo anotamos de la siguiente forma:

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

Esto para desarrollo es muy útil. En entornos productivos, además de la securización de acceso a recursos, tienes que poner en la etiqueta origins= desde donde quieres permitir que se acceda, la dirección.

Espero haberte sido de ayuda.

2
  • Gracias por tu contribución, recuerda que aclaraciones sobre la pregunta se realizan como comentarios, revisar Cómo responder, saludos.
    – Jorgesys
    Commented el 19 sept. 2019 a las 13:43
  • 1
    @Jorgesys gracias. Oido cocina
    – Ignacio
    Commented el 19 sept. 2019 a las 13:52

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.