El problema de CORS

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.

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 “false” 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/*":{
“target”:“https://localhost:8080”,
“secure”: true,
“logLevel”: “debug”

}

}

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!!!