No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

El problema de CORS

11/23
Recursos

Cross Origin Resource Sharing (CORS) o en espa帽ol, Intercambio de Recursos de Origen Cruzado, es un mecanismo de seguridad para la solicitud e intercambio de recursos entre aplicaciones con dominios diferentes. En pocas palabras, si las solicitudes HTTP se realizan desde un dominio diferente al dominio del backend, estas ser谩n rechazadas.

Si eres desarrollador o desarrolladora front-end, tendr谩s problemas de CORS a lo largo de tu carrera y en m煤ltiples oportunidades. Pero no te preocupes, es completamente normal y vamos a ver de qu茅 se trata para evitar dolores de cabeza.

C贸mo habilitar el dominio

Si CORS no est谩 habilitado en el backend que est茅s consultando, las peticiones se bloquear谩n y ver谩n un error en la consola de desarrollo del navegador.

Depender谩 del equipo back end o de ti si tambi茅n est谩s desarroll谩ndolo, de habilitar el dominio del front-end desde el cual se ejecutar谩n las peticiones.

La habilitaci贸n del dominio suele ser muy sencilla y depender谩 del lenguaje de programaci贸n y framework que est茅s utilizando, pero suele verse de la siguiente manera:

// MAL: Un * da permisos a cualquier dominio de realizar peticiones, es una muy mala pr谩ctica de seguridad.
cors({ origin: '*' })

// BIEN: Lo ideal es solo permitir los dominios que queremos autorizar a realizar peticiones.
cors({ origin: ['mydomain.com', 'app.mydomain.com'] })

Entornos donde se produce este error

Este error suele producirse principalmente en entornos de desarrollo o productivos reales, en servidores en la nube. No es tan habitual que suceda en entornos locales, ya que aplicaciones como Postman o Insomnia para realizar pruebas de petici贸n HTTP, cambian el origen de las peticiones y evitan este problema.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 13

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

My aporte par aun caso particular:

En el caso que expone el profesor es cuando la URL es de la estructura: https://domain.com/api/

La forma en como se implementa funciona muy bien, incluso para cuando el valor que dice api es igual a otro string funciona sin problemas, como por ejemplo group, la URL ser铆a: https://domain.com/group/

Hasta ah铆 todo sin problemas, pero que pasa cuando la URL contiene solo el dominio, por ejemplo:

https://domain.com

Busqu茅 en varias fuentes y no hab铆a nada claro, quiero mostrar como yo manej茅 el problemas de CORDS para una URL que solo tenga el dominio.

Primero: La URL que dejo establecida en el eviroment o dentro del mismos servicio que voy a consumir el servicio http, la dejo de la forma: /api/ (que es el end point tal como el profe dice). Entonces el servicio queda de la siguiente forma:

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

@Injectable({
  providedIn: 'root'
})
export class ImagesServicesService {

  constructor(private httpClient: HttpClient) { }

  url = "/api/" // Hay un proxy de desarrollo para evitar problemas de CORDS
  
  getInf(): Observable<any> {
      return this.httpClient.get(this.url)
  }
  
}

Segundo: en el proxy a帽ado un par谩metro adicional para reescribir el path de la URL. Queda de la siguiente forma:

{
  "/api/": {
    "target": "https://dominio.com",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": "/"
    }
  }
}

Con esto cuando haga una petici贸n http el proxy me modifica la URL que solicito, me pone el target y modifica el api quitandolo.

Espero que sea de ayuda.

Esta clase era necesaria desde el curso de angular 8

Excelente clase, desde mis inicios, los CORS siempre han sido un dolor de cabeza, que solo se han resuelto con pa帽os de agua tibia. Una explicaci贸n clara como esta ayuda inmensamente. Gracias 馃槃

Para el que le salga este error

[SELF_SIGNED_CERT_IN_CHAIN]

Lo solucion茅 colocando en 鈥渇alse鈥 la propiedad secure del proxy, asi:

 {
  "/api/*": {
    "target": "https://young-sands-07814.herokuapp.com",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

Entiendo que as铆 se evita que se revise el certificado, pero 驴Alguien sabe una mejor forma de solucionar ese problema?

Todo por no tomar mis clases a tiempo xD
Recientemente tuve este problema, ya fue la segunda vez de hecho, un aplicativo angular se conectaba a un web api de .net framework, recuerdo que la soluci贸n fue una configuraci贸n en IIS, sin embargo, recientemente me pas贸 de nuevo, 茅sta vez m谩s complicado, Igualmente un cliente de angular esta vez a un API en Net Core montada en un microservicio de kubernetes, Obviamente la petici贸n de mi k8s ven铆a del host de mi nodo m谩ster y el microservicio se expon铆a desde un load balancer en el mismo cl煤ster, pero aparte con https鈥 Pff que lio, Aunque es muy buena la soluci贸n temporal que muestra el profe, efectivamente es un problema de backEnd y se debe de corregir desde el api, esta segunda vez que tuve el problema se ten铆a que agregar una pol铆tica al ConfigureServices de la clase startUp

lo necesitaba, porque no me consum铆a la API que realice en Java, y este video lo estaba buscando, me quedo asi:

{
"/api/*":{
鈥渢arget鈥:鈥https://localhost:8080鈥,
鈥渟ecure鈥: true,
鈥渓ogLevel鈥: 鈥渄ebug鈥

}

}

Le ped铆 a ChatGPT que me lo explicara CORS c贸mo si tuviera 12 a帽os. Aqu铆 pueden leer su respuesta

Muy buena explicacion sobre el problema y como resolverlo.

Exelente aporte los CORS siempre son una molestia 鈥 hasta hoy

Soluci贸n temporal para Cors con proxy

Una alternativa que podemos usar para este problema de CORS si no tenemos control sobre el servidor seria utilizar el proyecto Cors-anywhere que pr谩cticamente har铆a lo mismo que postman /insomnia modificando el origen para que nuestra solicitud no sea bloqueada.

Algunas veces he tenido problemas CORS, me encanta la soluci贸n planteada por Angular. Sencilla y elegante.

Excelente video!!!