¿Qué es Web CORS en HTML5?

CORS en HTML5 significa Intercambio de recursos de origen cruzado. CORS es un mecanismo que permite que un sitio web en una URL solicite datos de una URL diferente en forma de imagen, texto o incluso una API. Este es un mecanismo basado en el encabezado HTTP que limita el servidor para cargar recursos desde cualquier otro puerto o dominio que no sea él mismo. Entendámoslo con un ejemplo:

Explicación :

• En la imagen, podemos ver claramente que el sitio web geeksforgeeks está realizando dos requests. Uno es de la URL www.geeksforgeeks.com/api . Esta URL pertenece al mismo dominio que geeksforgeeks.com, por lo que esta solicitud no se incluirá en el mecanismo CORS .
• En la segunda solicitud, busca la URL otrodominio.com . Como no está bajo el mismo dominio que geeksforgeeks.com , estará bajo el mecanismo CORS del navegador y el navegador puede bloquear esta solicitud.

Encabezado de origen de la solicitud:

• Cuando el navegador realiza una solicitud, agrega un encabezado de origen al mensaje de solicitud. si esa solicitud va a un servidor en el mismo origen, el navegador la permite sin ningún problema.
• Si esa solicitud va a una URL diferente, se conoce como una solicitud de origen cruzado.
• En respuesta a cada solicitud, el servidor agregará el encabezado access-control-allow-origin al objeto de respuesta.
• El valor de este encabezado de control de acceso-permitir-origen de la respuesta debe coincidir con el encabezado de origen del objeto de solicitud o el servidor solicitado debe permitir todos los dominios.
• En cualquier otro caso, el navegador dejará de compartir los datos de respuesta con el cliente y arrojará un error CORS.

Imagen del encabezado de origen en una solicitud

Errores y la política del navegador: 

• El error CORS ha molestado tanto a los desarrolladores front-end como a los back-end desde el comienzo de Internet. Su sitio web puede intentar obtener datos de otra API y terminar con el error CORS en la consola. Eso sucede porque el navegador siempre implementa la misma política de origen como parte de su modelo de seguridad.

IMAGEN DE ERROR CORS

• Esta política permite que un sitio web solicite libremente datos de las URL asociadas con el mismo dominio, pero bloquea cualquier cosa de una URL asociada con otro dominio a menos que validemos ciertas condiciones.

Solucione el error CORS: 

Tenemos que usar un middleware CORS dentro de nuestra aplicación Node.js para corregir este error desde nuestro lado del servidor. Eso nos permitirá cambiar el encabezado access-control-allow-origin del objeto de respuesta enviado desde nuestro servidor.

• Instale el paquete CORS y express.js usando npm o yarn.

npm install express
npm install cors

• Use la función cors para cambiar el encabezado access-control-allow-origin usando la palabra clave origin .

// Import Express
const express = require('express');
  
// Create the Express App
const app = express();
  
// Import CORS
const cors = require('cors');
  
// Set the access-control-allow-origin header
// for all the responses sent from this URL
// Using the origin keyword
app.use(cors({ origin: 'http://desired.url' }));