CORS ¿Qué es y cómo resolver un error de Cross-Origin Resource Sharing (CORS)?

Introducción: el problema de CORS
Es probable que hayas experimentado la situación de intentar iniciar sesión en una aplicación, ingresas tus datos, haces clic en enviar y no sucede nada en la página. Lo primero que hace un desarrollador es inspeccionar la página y, a continuación, abrir la consola del navegador (presionando la tecla F12 o haciendo clic derecho y luego seleccionando "Inspeccionar").

Te encuentras con el error "blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted." o un mensaje similar.

¿Pero sabes qué causa esto?
Política de misma origen: Same-origin policy
La política de misma origen (same-origin policy) es un mecanismo de seguridad que restringe cómo un documento o script de un origen puede interactuar con recursos de otro origen. ¿Y para qué sirve esto? Ayuda a evitar ataques maliciosos.

Dos URLs comparten el mismo origen si el protocolo, puerto (en caso de estar especificado) y host son los mismos. Considera la URL https://cursos.alura.com.br/category/front-end, comparemos posibles variaciones:

Pero, al analizar estas variaciones, ¿cómo lidiamos con situaciones en las que nuestro front-end necesita consumir una API con una URL diferente sin tener problemas con el CORS? Como en el caso de querer conectar una API que se ejecuta en el puerto 8000 con una aplicación React que se ejecuta en el puerto 3000.

Al enviar una solicitud a una API de un origen diferente, el servidor debe devolver un encabezado llamado Access-Control-Allow-Origin. En él, es necesario especificar los diferentes orígenes que estarán permitidos, por ejemplo:

Access-Control-Allow-Origin: http://localhost:3000/

Es posible permitir el acceso desde cualquier origen utilizando el símbolo asterisco, como se muestra a continuación:

Access-Control-Allow-Origin: *

Esto no es una medida recomendada, ya que permite que orígenes desconocidos accedan al servidor, a menos que sea intencional, como en el caso de una API pública.

¿Qué es el CORS?

CORS (Cross-origin Resource Sharing) es un mecanismo utilizado para agregar encabezados HTTP que indican a los navegadores que permitan a una aplicación web ejecutarse en un origen y acceder a recursos de otro origen diferente. Este tipo de acción se denomina una solicitud HTTP de origen cruzado.

Se utiliza para habilitar solicitudes entre sitios para llamadas XMLHttpRequest o FetchAPI (entre diferentes orígenes), fuentes web (@font en CSS), texturas WebGL y marcos de dibujos utilizando drawImage().

Para obtener más información sobre el protocolo HTTP y entender mejor el funcionamiento de CORS, tenemos diversos contenidos para ti:

• https://app.aluracursos.com/course/http-base-internet
• https://www.aluracursos.com/blog/http-desmitificando-el-protocolo