JavaScript Fetch: Solicitudes entre orígenes (CORS)

Las solicitudes entre orígenes son una parte esencial del desarrollo web moderno, ya que permiten la interacción entre recursos de diferentes orígenes. En este artículo, profundizaremos en el manejo de solicitudes entre orígenes utilizando la API Fetch en JavaScript. Al finalizar, tendrás una comprensión completa de las solicitudes entre orígenes, cómo configurarlas y las mejores prácticas para usar la API Fetch de manera efectiva.

Comprender las solicitudes entre orígenes

Las solicitudes entre orígenes ocurren cuando una aplicación web solicita recursos de un origen diferente (dominio, protocolo o puerto) al suyo. Estas solicitudes son fundamentales para acceder a APIs, obtener datos de fuentes externas e integrar servicios de terceros.

La importancia de CORS

El intercambio de recursos entre orígenes (CORS) es una función de seguridad implementada por los navegadores para controlar cómo las páginas web pueden solicitar recursos de diferentes orígenes. Las políticas CORS son aplicadas por el servidor mediante cabeceras HTTP específicas.

Uso de Fetch para solicitudes entre orígenes

La API Fetch proporciona una forma moderna y flexible de realizar solicitudes HTTP en JavaScript. Admite promesas, lo que facilita el trabajo con código asíncrono.

Uso básico de Fetch

Comencemos con un ejemplo sencillo de cómo usar Fetch para realizar una solicitud GET. Puedes aprender mucho sobre ella en nuestra página anterior, API Fetch.

---

Output appears here after Run.

Manejo de CORS con Fetch

Al realizar solicitudes entre orígenes, el servidor debe incluir cabeceras específicas para permitir la solicitud. Las cabeceras esenciales incluyen:

• Access-Control-Allow-Origin: Especifica qué orígenes tienen permitido acceder al recurso.
• Access-Control-Allow-Methods: Enumera los métodos HTTP permitidos para solicitudes entre orígenes.
• Access-Control-Allow-Headers: Enumera las cabeceras que pueden incluirse en la solicitud.

Realización de solicitudes entre orígenes

Para realizar una solicitud entre orígenes con Fetch, puedes establecer la opción mode en cors. Este es el modo predeterminado para solicitudes entre orígenes. Permite que la solicitud se realice si el servidor lo permite explícitamente mediante cabeceras CORS. Aquí tienes un ejemplo:

WARNING

En tu servidor, evita usar un comodín (*) para Access-Control-Allow-Origin en producción por razones de seguridad.

---

Output appears here after Run.

Envío de credenciales con Fetch

Si tu solicitud entre orígenes requiere credenciales (como cookies o autenticación HTTP), debes incluir la opción credentials:

---

async function fetchWithCredentials(url) {
  try {
    const response = await fetch(url, {
      mode: 'cors',
      credentials: 'include'
    });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchWithCredentials('https://api.crossorigin.com/secure-data');

note

Si una política CORS bloquea la respuesta, el navegador devuelve una respuesta opaca. No podrás leer el estado ni el cuerpo, pero la promesa de fetch se rechazará, lo que te permitirá capturar el error en el bloque catch.

Manejo de solicitudes de preflight

Al realizar ciertos tipos de solicitudes entre orígenes, el navegador primero envía una solicitud OPTIONS (solicitud de preflight) al servidor para determinar si la solicitud real es segura para enviar. Esto ocurre en solicitudes que:

• Utilicen métodos distintos a GET, HEAD o POST.
• Incluyan cabeceras personalizadas.
• Utilicen la cabecera Content-Type con valores distintos a application/x-www-form-urlencoded, multipart/form-data o text/plain.

Si el preflight falla, el navegador lanza un error de red en lugar de devolver un código de estado HTTP estándar. Esto significa que el error se capturará en el bloque catch, no será manejado por response.ok.

Mejores prácticas para solicitudes Fetch entre orígenes

Protege tu API

Asegúrate de que tu API sea segura validando y sanitizando todos los datos entrantes. Usa HTTPS para cifrar los datos en tránsito e implementa mecanismos adecuados de autenticación y autorización.

Usa las cabeceras CORS adecuadas

Configura tu servidor para incluir las cabeceras CORS necesarias. Evita usar un comodín (*) para Access-Control-Allow-Origin en producción. En su lugar, especifica exactamente los orígenes permitidos.

Maneja los errores de forma elegante

Implementa un manejo de errores robusto para proporcionar retroalimentación significativa a los usuarios y registrar errores con fines de depuración.

Optimiza el rendimiento

Minimiza el número de solicitudes entre orígenes combinando recursos cuando sea posible y utilizando caché para reducir los tiempos de carga.

Conclusión

Dominar las solicitudes entre orígenes con la API Fetch es fundamental para el desarrollo web moderno. Al comprender cómo configurar y manejar estas solicitudes, puedes construir aplicaciones web más seguras, eficientes y confiables. Sigue las mejores prácticas descritas en este artículo para garantizar que tus solicitudes entre orígenes se manejen de manera correcta y segura.