Intercambio de recursos de origen cruzado (CORS)

CORS (Cross-Origin Resource Sharing) es un mecanismo mediante el cual los datos o cualquier otro recurso de un sitio podrían compartirse intencionalmente con un sitio web de terceros cuando sea necesario. En general, el acceso a los recursos que residen en un sitio de terceros está restringido por los clientes del navegador por motivos de seguridad.

El código del lado del cliente para hacer una llamada HTTP se vería a continuación,

function httpGetAction(urlLink)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", urlLink, false ); 
    xmlHttp.send();
    return xmlHttp.responseText;
}

Este método nativo de JavaScript está destinado a realizar una llamada HTTP al enlace urlLink dado a través del método GET y devolver el texto de respuesta del recurso de terceros.

De forma predeterminada, el navegador bloquea una solicitud a dominios que no son principales (dominios que no sean el dominio desde el que realiza la llamada). Si intenta hacerlo, la consola arrojará el siguiente error.,

Failed to load https://contribute.geeksforgeeks.org/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.google.com' is therefore not allowed access.

Por supuesto, hay algunos casos en los que necesita acceder a un sitio web de terceros, como obtener una imagen pública, realizar una llamada API que no cambia de estado o acceder a otro dominio del que es propietario. Hay algunas maneras de lograr esto, como y cuando sea necesario.

Uno podría tener una idea del mensaje de error de que el encabezado Access-Control-Allow-Origin no está presente en el recurso solicitado. Simplemente significa que el sitio web de destino a cuyo recurso está intentando acceder no le ha permitido específicamente obtener el recurso de su sitio.

Esto podría hacerse con un encabezado HTTP adicional, Access-Control-Allow-Origin . Este encabezado podría tomar los siguientes valores.,

• Access-Control-Allow-Origin: [origen]
  Ejemplo: Access-Control-Allow-Origin: https://contribute.geeksforgeeks.org
  Esto le permite permitir específicamente que un sitio web acceda a su recurso. En este caso, https://contribute.geeksforgeeks.org puede acceder a su recurso web, ya que está explícitamente permitido.
  Esto requiere un encabezado adicional llamado ORIGEN enviado desde el cliente solicitante que contiene su nombre de host. Este encabezado de origen se compara con el origen permitido y se decide el acceso al recurso.
• Access-Control-Allow-Origin: *
  Ejemplo: Access-Control-Allow-Origin: *
  Carácter comodín (*) significa que cualquier sitio puede acceder al recurso que tiene en su sitio y, obviamente, no es seguro.

Según los métodos de solicitud (GET/PUT/POST/DELETE) y los encabezados de solicitud, las requests se clasifican en dos categorías.

1. Requests simples
2. Requests no simples/complejas

Requests simples
Para requests simples, el CORS funciona de la siguiente manera,

1. La solicitud se realiza a un sitio de terceros con el encabezado ORIGIN .
2. En el sitio de destino, el valor ORIGIN se compara con los orígenes permitidos.
3. Si la fuente es una fuente permitida, entonces se otorga acceso al recurso; de lo contrario, se deniega.

Requests complejas
Para requests complejas, el CORS funciona de la siguiente manera,

1. Antes de que se envíe la solicitud real, se envía una solicitud previa al vuelo al sitio de destino.
2. Esta solicitud previa al vuelo se envía a través del método de solicitud HTTP OPTIONS .
3. La respuesta a la solicitud previa al vuelo contendría los métodos permitidos, detalles de origen permitidos sobre el sitio de destino.
4. Después de decidir si el sitio de destino podría devolver la información solicitada en función de esta respuesta, el navegador envía la solicitud GET/POST real.

Siempre que sea necesario compartir los recursos con un sitio de terceros, el sitio debe incluirse específicamente en la lista blanca con Access-Control-Allow-Origin: https://sitename.com en lugar de comodines como práctica recomendada de seguridad.

Referencias: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS