0

estoy haciendo el front end para una api en angular, y estoy teniendo un error con la solicitud PUT, logre hacer con exito peticiones GET, DELETE, y POST, pero al usar el PUT para editar uno de los items, me sale el error: Access to XMLHttpRequest at 'http://localhost:8080/api/education/[object%20Object]' from origin 'http://localhost:4200' has been blocked by CORS policy

Este es mi education.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EducationService {
  url='http://localhost:8080/api/education';
  constructor(private http: HttpClient) { }
  
  getEducation():Observable<any>
  {
    return this.http.get<Education[]>(this.url);
  }

  getOneEducation(id: number):Observable<any>
  {
    return this.http.get(this.url+'/'+id);
  }

  saveEducation(education: Education):Observable<Education>
  {
    return this.http.post<Education>(this.url, education);
  }

  editEducation(id:number, education: Education):Observable<any>
  {
    return this.http.put(this.url+'/'+id, education);
  }

  deleteEducation(id: number):Observable<any>
  {
    return this.http.delete(this.url+'/'+id);
  }
}

export interface Education {
  id?: number,
  year1: string,
  year2: string,
  level: string;
  place: string,
  dtexto: string
}

este es la parte del codigo del EducationController.java (la API) :

@PutMapping("/education/{id}")
    public Education modificar(@RequestBody Education education,@PathVariable Integer id)
    {
        Education editData= educationService.findById(id);
        editData.setYear1(education.getYear1());
        editData.setYear2(education.getYear2());
        editData.setLevel(education.getLevel());
        editData.setPlace(education.getPlace());
        editData.setDTexto(education.getDTexto());
        
        return educationService.save(editData);
    }

y este es el edit.component.ts (el formulario recibe los datos de la entrada, pero al hacer el envio de los datos actualizados me da el error) :

import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { EducationService } from 'src/app/services/education.service';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
  editeduForm !: FormGroup;
  horizontalPosition: MatSnackBarHorizontalPosition = 'end';
  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
  
  constructor(private educationService: EducationService,
    private formBuilder: FormBuilder, 
    @Inject(MAT_DIALOG_DATA) public editData : any,
    private dialogRef : MatDialogRef<EditComponent>, private _snackBar: MatSnackBar) { }

  ngOnInit(): void {
    this.editeduForm = this.formBuilder.group({
      year1 : ['',Validators.required],
      year2 : ['',Validators.required],
      level : ['',Validators.required],
      place : ['',Validators.required],
      dtexto : ['',Validators.required]
    });
    this.editeduForm.controls['year1'].setValue(this.editData.year1);
    this.editeduForm.controls['year2'].setValue(this.editData.year2);
    this.editeduForm.controls['level'].setValue(this.editData.level);
    this.editeduForm.controls['place'].setValue(this.editData.place);
    this.editeduForm.controls['dtexto'].setValue(this.editData.dtexto);
  }

  guardar(){
    this.educationService.editEducation(this.editeduForm.value,this.editData.id).subscribe({
      next:(res)=>{
        alert("Actualizado correctamente");
        let config = new MatSnackBarConfig
          config.panelClass = ['green-snackbar'];
          config.verticalPosition = this.verticalPosition;
          config.horizontalPosition = this.horizontalPosition;
          config.duration = 1500;
          this._snackBar.open("Agregado correctamente", "" , config);
          this.editeduForm.reset();
        this.dialogRef.close('update');
      },
      error:()=>{
        let config = new MatSnackBarConfig
          config.panelClass = ['warn-snackbar'];
          config.verticalPosition = this.verticalPosition;
          config.horizontalPosition = this.horizontalPosition;
          config.duration = 1500;
          this._snackBar.open("Error al agregar", "" , config);
      }
    })
  }
}

por si las dudas este es el html del edit.component (es el mismo que uso para añadir un elemento nuevo, solo que este carga los datos del elemento, y eso si funciona pero no guarda los cambios) :

<h1 mat-dialog-title>Editar educación</h1>
<div mat-dialog-content>
  <form [formGroup]="editeduForm">
    <mat-form-field  appearance="outline" class="full-width">
      <mat-label>Nivel de educación</mat-label>
      <input formControlName="level" matInput>
    </mat-form-field>
    <mat-form-field appearance="outline" class="full-width">
      <mat-label>Lugar</mat-label>
      <input formControlName="place" matInput>
    </mat-form-field>
    <mat-form-field appearance="outline" class="full-width">
      <mat-label>Fecha de inicio</mat-label>
      <input formControlName="year1" matInput [matDatepicker]="picker1">
      <mat-hint>MM/DD/YYYY</mat-hint>
      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
      <mat-datepicker #picker1></mat-datepicker>
    </mat-form-field>
    <mat-form-field appearance="outline" class="full-width">
      <mat-label>Fecha de finalizacion</mat-label>
      <input formControlName="year2" matInput [matDatepicker]="picker2">
      <mat-hint>MM/DD/YYYY</mat-hint>
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
    </mat-form-field>
    <mat-form-field appearance="outline" class="full-width">
      <mat-label>Descripción</mat-label>
      <textarea  formControlName="dtexto" matInput></textarea>
    </mat-form-field>
  </form>
</div>
<div mat-dialog-actions [align]="'end'"> 
  <button mat-raised-button color="warn" mat-dialog-close>Cancelar</button>
  <button style="margin-left: 8px" mat-raised-button color="primary" (click)="guardar()">Actualizar</button>
</div>
1
  • Ese detalle por regular se debe a los Headers en tu desarrollo que recibe la petición; te recomendaría añadir el Access-Control-Allow-Origin: *', si lo quieres para todos lo sitios o Access-Control-Allow-Origin: http://localhost:4200' , también añadir el Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE.
    – Artes
    el 25 abr. 2022 a las 21:09

1 respuesta 1

1

Estas mandando mal la data, en tu metodo de guardar() mandas invertida la data del formulario y el id... por eso te sale un [object] en la peticion en lugar del id a actualizar.

El service te recibe primero el id y luego el formData.

lo envias asi:

this.educationService.editEducation(this.editeduForm.value,this.editData.id)

debes enviarlo asi:

this.educationService.editEducation(this.editData.id,this.editeduForm.value)

Espero sea de Ayuda. Happy Coding!

2
  • tenes razon, no me habia dado cuenta jajaja, ya anda perfectamente, muchas gracias por la ayuda!
    – Mariano
    el 27 abr. 2022 a las 14:52
  • A todos nos pasa. Exitos
    – Julio Daza
    el 27 abr. 2022 a las 15:36

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.