3

Estoy teniendo la siguiente dificultad: Cuando quiero acceder a información guardada en mi BD desde Spring (localhost:8080) accedo perfectamente, pero si quiero acceder a esa misma información desde una petición desde Angular (localhost:4200) me da problema de CORS.

En mi servicio de Angular lo tengo armado asi:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Clientes  } from "./clientes.interface";
import { map } from "rxjs/operators";

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
};

@Injectable()

export class ClientesService{

  urlBase:string = "http://localhost:8080/clientes"



  constructor(private http:HttpClient) {}

  nuevoCliente( cliente:Clientes){
    return this.http.post( this.urlBase, cliente, httpOptions).pipe(map(data => data['id']));
  }
}

Y en Spring lo tengo armado de la siguiente forma:

package com.gestion.backend.controllers;

import java.util.List;

import com.gestion.backend.entidades.Cliente;
import com.gestion.backend.services.ClientesService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

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

    @Autowired
    ClientesService clientesService;


    // Traigo todos los clientes
    @GetMapping("/clientes")
    public List<Cliente> getCLientes(){
        return clientesService.getClientes();
    }

    // Traigo un usuario especifico
    @GetMapping("/clientes/{id}")
    public Cliente getCliente(@PathVariable Long id){
        System.out.println("ID" + id);

        return clientesService.getClienteById(id);
    }
}

En ambos lados aclaro lo de CORS...que me esta faltando para que no me de el error:

Access to XMLHttpRequest at 'http://localhost:8080/clientes' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Muchas Gracias!

2 respuestas 2

2

Usa el puerto del front end:

@CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)
@RestController

y en ese orden, primero crossOrigin y luego la declaracion de restController

prueba borrando

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' })
};

y tambien borra esto:

  urlBase:string = "http://localhost:8080/clientes"
1
  • Hola! Gracias por responder, probe haciendo eso y sigue igual!.. Commented el 20 abr. 2019 a las 17:24
0

Hola crea un clase donde puedas configurar el siguiente metodo con la anotación @Configuration

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

        }           

    };          
}
2
  • Hola Edson! Gracias por responder...esta clase como la vinculo con mi clase clientes por ejemplo? Gracias! Commented el 22 abr. 2019 a las 12:14
  • en si con crear una clase con la anotacion @Configuration y con extends a WebMvcConfigurerAdapter debe de funcionar. Commented el 24 abr. 2019 a las 20:41

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.