Categorías
Desarrollo

Cómo solucionar errores de CORS en Angular

En ocasiones tenemos que lidiar con errores de CORS en el curso de nuestros desarrollos. En este post te enseñamos a «quitarte ese problema de encima» en Angular.

En este post, vamos a profundizar en los detalles de cómo CORS puede afectar a la interacción entre una aplicación Angular y una API.

Escenario de partida

Imagina que tienes una aplicación Angular que se ejecuta en http://localhost:4200 y que intenta hacer una solicitud HTTP a una API que se ejecuta en http://localhost:8443/api. A pesar de que ambos están alojados en localhost, el navegador web bloqueará la solicitud debido a las restricciones CORS.

¿Qué es CORS?

Empezaremos entendiendo que es CORS, significa «Cross-Origin Resource Sharing» y es un mecanismo que permite a un sitio web solicitar recursos (como imágenes, scripts, etc.) desde otro origen (es decir, un dominio diferente al del sitio web actual).

Sin embargo, los navegadores tienen una política de seguridad que impide que un sitio web acceda a recursos de otro origen sin permiso explícito. CORS proporciona una forma de solicitar permiso para acceder a los recursos de otro origen.

En otras palabras, CORS es como una puerta de seguridad que permite a un sitio web acceder a recursos de otro sitio web, siempre y cuando tenga permiso.

Explicación del funcionamiento:

Aquí un ejemplo visual de cómo funciona CORS:

  1. Sitio web A solicita una imagen desde el sitio web B.
  2. El navegador web envía una solicitud al sitio web B para obtener la imagen.
  3. El sitio web B envía una respuesta con permiso explícito para que el sitio web A acceda a la imagen.
  4. El navegador web permite que el sitio web A acceda y muestre la imagen.

Como punto a tener en cuenta, los errores de CORS solo se podrán analizar y visualizar en la consola de desarrollo de los navegadores.

Solución a esta problemática:

A continuación, vamos a mostrar una solución a este tipo de errores para Angular (>= 2):

Creamos un fichero proxy.conf.json en la raíz de nuestro proyecto:

{
     "/api": {
          "target": "http://localhost:8443",
          "secure": false
     }
}

Estamos especificando que todas las llamadas realizadas a /api serán interceptadas por el proxy, enviadas a http://localhost:8443 de forma no segura.

¡CUIDADO! Estas configuraciones son aptas SOLO para entornos de desarrollo.

A continuación, vamos a invocar al fichero y para esto tenemos 2 opciones:

  • Angular-cli.json:
...
"defaults": {
"styleExt": "",
"component": {},
"serve": {
"proxyConfig": "proxy.conf.json"
}
}
...
package.json:
"scripts": {
"start": "ng serve --proxy-config proxy.conf.json"
}
angular.json:
...
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "proxy.conf.json"
},
...
  • Sentencia CLI:

Iniciaremos nuestra App con el siguiente comando:

ng-serve --proxy-config proxy.conf.json

Una vez habiendo configurado con cualquiera de las opciones anteriores, ya no tendremos más este tedioso fallo.