1

Alquien me podria ayudar tengo un problema. Pero no lo puedo interpretar.

user.service.ts

  postUser(user:User):Observable<User[]>{
  let body = JSON.stringify(user);
  let headers = new HttpHeaders({
     'Content-Type': 'application/json'
  });

  return this._http.post<User[]>(this.listaUserURL, body, { headers })
  //.pipe(map( res => {return res}));
  .pipe ();
}

usuario.component.ts

saveUser() {
    this._appUserService.postUser(this.user)
.subscribe((data :User[]) => {console.log(data)});
}

ERROR Este es el error que me sale

Access to XMLHttpRequest at 'http://localhost:3000/user' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

2 respuestas 2

2

Cuando haces una petición HTTP desde un navegador web usando Javascript y el método XMLHttpRequest (mecanismo también conocido como AJAX, y usado por muchos frameworks javascript, Angular entre ellos), el navegador verifica si la URL a la que haces la petición es la misma que la que muestra la barra de navegación del navegador (que es lo que se llama el origin).

En tu caso no son la misma, debido a que son diferentes puertos.

Cuando no es la misma URL, el navegador se toma ciertas precauciones antes de permitirle esa petición al javascript. Lo primero que hace es realizar al servidor una petición OPTIONS, en vez de POST y después examina las cabeceras de la respuesta del servidor. Entre ellas busca ciertas cabeceras especiales que significan que el servidor le "da permiso" para continuar. Sólo entonces hace la petición POST en cuestión.

En tu caso, tu servidor no ha enviado la cabecera Access-Control-Allow-Headers que es una de las que espera el navegador, por lo que el navegador aborta la petición.

Todo este protocolo y las cabeceras involucradas se conocen bajo el nombre de CORS, por si necesitas buscar información para averiguar cómo se incluyen esas cabeceras en el framework particular que use tu servidor.

3
  • Si me parese que tiene razón en mi API REST me sale -> OPTIONS /user 200 5.551 ms - 13
    – Jhonny SAN
    Commented el 14 nov. 2018 a las 22:01
  • ¿tendria que instalar cors a mi API REST?
    – Jhonny SAN
    Commented el 14 nov. 2018 a las 22:03
  • @JhonnySAN Sí, tienes que investigar la documentación del framework que implementa tu API REST para buscar como habilitar CORS (lo que significa, aceptar la petición OPTIONS y responder con las cabeceras adecuadas)
    – abulafia
    Commented el 14 nov. 2018 a las 22:07
1

En tu REST API, debes aceptar CORS, para que acepte peticiones de tu localhost o tu url de desarrollo. Te adjunto este link donde explica como activar CORS dependiendo de tu backend.

ENABLE CORS

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.