Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

El problema de CORS

11/23
Recursos

Aportes 9

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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 “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?

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

Muy buena explicacion sobre el problema y como resolverlo.

Exelente aporte los CORS siempre son una molestia … hasta hoy