1

El problema que tengo, es que corro mi servidor y uno de mis componentes en angular, no me muestra el html que le ingrese y me muestra un error que dice:

Access to XMLHttpRequest at 'http://localhost:8080/api1' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. :8080/api1:1 Failed to load resource: net::ERR_FAILED core.js:6210 ERROR HttpErrorResponse

Tengo bien configurado el CrossOrigin en Java, ya que otras funcionalidades si me funcionan, adjuntare el código de mi api rest

    @RestController
    @RequestMapping("/api")
    @CrossOrigin (origins = "http://localhost:4200")
    public class ReclamoController {

    @RequestMapping(method = RequestMethod.POST, value = "/ADMIN/pendientes/respuesta")
    public void insertarRespuesta(@RequestBody Respuesta respuesta) throws Exception{
    Fecha fecha = new Fecha();
    String slarespuesta = fecha.compararFechas(respuesta);
    respuesta.setSLA_respuesta(slarespuesta);
    RespuestaDAO.insertarRespuesta(respuesta);
    }
    }

El componente de angular que no se visualiza, seria este:

     <div class="contenedor" *ngIf="respuesta">
     <h2>Reclamo N°...</h2>
      <div class="contenedor1">
      <h3>Estado reclamo: Pendiente/No pendiente.</h3>

        <h3>Detalles Reclamo {{respuesta.num_reclamo}}</h3>
        <hr>
        <mat-form-field style="width: 100%;" >
            <mat-label>Numero de reclamo</mat-label>
            <input matInput #num_reclamo value="{{respuesta.num_reclamo}}" disabled="true">
        </mat-form-field>
        <mat-form-field style="width: 100%;">
            <mat-label>RUT del ADMIN</mat-label>
            <input matInput #rut_admin value="{{respuesta.rut_admin}}" >
        </mat-form-field>
        <mat-form-field style="width: 100%;">
            <mat-label>RESPUESTA DEL ADMIN</mat-label>
            <input matInput #texto_respuesta value="{{respuesta.texto_respuesta}}">
        </mat-form-field>
        <mat-form-field style="width: 100%;">
            <mat-label>Fecha de Respuesta YYYY/MM/DD</mat-label>
            <input matInput #fecha_respuesta value="{{respuesta.fecha_respuesta}}">
        </mat-form-field>
        <mat-form-field style="width: 100%;">
            <mat-label>SLA Respuesta</mat-label>
            <input matInput #SLA_respuesta value="{{respuesta.SLA_respuesta}}">
        </mat-form-field>
    <button mat-raised-button color="primary" (click)="volver()" style="margin: 1em;">Volver 
    Atras</button>
    <button mat-raised-button color="warn" (click)="guardar(num_reclamo.value, rut_admin.value, 
    texto_respuesta.value, fecha_respuesta.value, SLA_respuesta.value)">Guardar</button>

    </div>

Y acá su component.ts :

import { Component, OnInit, Input } from '@angular/core';
import { RespuestaService } from 'src/app/services/respuesta-service.service';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { Respuesta } from 'src/models/Respuesta';

@Component({
selector: 'app-respuesta-de-reclamo',
templateUrl: './respuesta-de-reclamo.component.html',
styleUrls: ['./respuesta-de-reclamo.component.css']
})
export class RespuestaDeReclamoComponent implements OnInit {

@Input() respuesta: Respuesta;
constructor(
private respuestaService:RespuestaService,
private ruta: ActivatedRoute,
private ubicacion: Location
) {}

ngOnInit(): void {
}

volver(){
this.ubicacion.back();
}

guardar(num_reclamo:number, rut_admin:number, texto_respuesta:string, fecha_respuesta:string, 
SLA_respuesta: string){
this.respuestaService.responderReclamo({num_reclamo, rut_admin, texto_respuesta, fecha_respuesta, 
SLA_respuesta} as Respuesta)
  .subscribe(_=>this.volver());
}
}
    static public int insertarRespuesta(Respuesta respuesta) throws Exception, SQLException {
        Connection conn = Conexion.obtenerConexion();
        String estadoReclamo = "RESPONDIDO";
        String insert = "insert into Respuesta(num_reclamo, rut_admin, texto_respuesta, fecha_respuesta, SLA_respuesta) values (?,?,?,?,?)";
        PreparedStatement ps = conn.prepareStatement(insert);
        ps.setLong(1, respuesta.getNum_reclamo());
        ps.setLong(2, respuesta.getRut_admin());
        ps.setString(3, respuesta.getTexto_respuesta());
        ps.setString(4, respuesta.getFecha_respuesta());
        ps.setString(5, respuesta.getSLA_respuesta());
        int resultado = ps.executeUpdate();
        return resultado;
    } 
5
  • por si acaso es.stackoverflow.com/questions/255969/… Commented el 10 may. 2020 a las 0:46
  • Persiste el problema, pero gracias Commented el 10 may. 2020 a las 0:50
  • como esta declarado este objeto RespuestaDAO ? Commented el 10 may. 2020 a las 1:22
  • Lo edite y añadi el respuesta dao Commented el 10 may. 2020 a las 1:31
  • Fijate en herramientas de desarrollador en el browser cuales son los request que está haciendo aplicación y agrega esa info a la pregunta. Puede que tengas uno o dos, en el caso de dos el primero sería un options. En la pregutna coloca el request, el metodo, los headers del request, y respecto al error fijate si no dice nada mas acerca del error. PTI: es.stackoverflow.com/questions/218426/…
    – Juan
    Commented el 10 may. 2020 a las 11:18

1 respuesta 1

2

Deberías crear una clase preferentemente a nivel de src/main/java/com.tuProjecto/configurations

con una anotación de @configuración que aplicará automáticamente al iniciar spring para agregar cors a tus URLs

import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CORSConfig {

    @Bean
    public WebMvcConfigurer CORSConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowedMethods("GET", "POST", "PUT","DELETE");
            }
        };
    }

}
1
  • Gracias, tuve el mismo problema y tras más de una hora buscándolo en el SO en inglés llegué a esta publicación y por fin se pudo solucionar. A lo que yo tengo entendido la anotación @CrossOrigin debería ser suficiente pero por alguna razón no funciona como lo esperado, sabrás a qué se debe esto? Commented el 29 dic. 2020 a las 1:10

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.