El acceso a XMLHttpRequest desde un origen diferente al que sirve la página, comúnmente conocido por sus siglas en inglés CORS (Cross-Origin Resource Sharing), es uno de los temas que genera más consultas y dudas en la comunidad de desarrolladores que trabajan con **JavaScript** y aplicaciones web. Este mecanismo de seguridad está implementado en los navegadores para evitar ataques maliciosos que podrían comprometer la información de los usuarios. Aquí exploraremos cómo abordar y resolver situaciones cuando nos topamos con errores del tipo “Access to XMLHttpRequest at ‘URL’ from origin ‘origin’ has been blocked by CORS policy”.
Para comprender mejor la situación, consideremos que un desarrollador intenta realizar una petición AJAX a un servidor externo desde su página alojada en otro dominio. Al hacerlo, se encuentra con un error de **CORS**. Esto ocurre porque por defecto, los navegadores restringen las peticiones HTTP que pueden iniciar scripts para solo hacerlas al mismo dominio que originó el script, esta es una práctica de seguridad conocida como “Same-Origin Policy”.
### ¿Qué es CORS y por qué es importante?
**CORS** es una política de seguridad implementada en los navegadores que permite que los servidores especifiquen quién puede acceder a sus recursos y cómo. Esta política es vital porque protege a los usuarios finales de ciertos tipos de ataques, como el Cross-Site Scripting (XSS) o el Cross-Site Request Forgery (CSRF), que podrían comprometer sus datos.
A pesar de ser una característica de seguridad, CORS puede ser un dolor de cabeza cuando queremos que nuestras aplicaciones interactúen con APIs o recursos alojados en dominios diferentes. Afortunadamente, existen maneras estandarizadas de permitir esta comunicación inter-dominio de forma segura.
#### Ejemplo Clásico de Error de CORS
Supongamos que tenemos el siguiente código de JavaScript, intentando hacer una petición a un servidor externo:
javascript
const xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘https://api.externo.com/datos’, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
Este es un enfoque bastante directo utilizando el objeto `XMLHttpRequest`, que es ampliamente soportado en los navegadores. Sin embargo, si la respuesta del servidor no incluye cabeceras adecuadas de CORS que permitan el acceso desde tu origen, el navegador bloqueará la respuesta y emitirá un error.
### Solucionando Problemas de CORS en el Cliente
A nivel de cliente, existen pocos métodos para solucionar los problemas de CORS, puesto que es una política de seguridad impuesta por los navegadores que no debe ser evadida a la ligera. Sin embargo, en contextos de desarrollo, puedes usar algunos métodos para poder continuar con tu trabajo mientras se configura correctamente el servidor.
#### Uso de un Proxy de Desarrollo
Durante la fase de desarrollo, una práctica común es utilizar un proxy que añada las cabeceras de **CORS** necesarias. Herramientas como **Webpack** o **Create React App** ya tienen integrado un mecanismo para facilitar esta tarea.
La idea es que todas las peticiones pasen a través de un servidor intermedio que, al recibir la respuesta del servidor final, añada las cabeceras de CORS correspondientes y luego las reenvíe al cliente.
#### Modificación Temporal del Navegador
Otra opción es deshabilitar temporalmente la política de seguridad de CORS en tu navegador. Esto generalmente se hace ejecutando el navegador con una bandera específica o utilizando extensiones diseñadas para esto. Es importante recalcar que este método solo debe usarse para pruebas locales y nunca en un ambiente de producción, ya que desactiva importantes controles de seguridad.
### Abordando CORS desde el Servidor
#### Configuración de las Cabeceras de CORS
Ahora, para resolver estos problemas de manera adecuada y definitiva, es necesario configurar las cabeceras HTTP del servidor para que este acepte peticiones de ciertos orígenes. Aquí tienes un ejemplo en **Node.js** usando **Express** donde se especifica que todas las peticiones de cualquier origen (*wildcard*) son permitidas:
javascript
const express = require(‘express’);
const app = express();
app.use((req, res, next) => {
res.header(‘Access-Control-Allow-Origin’, ‘*’);
res.header(‘Access-Control-Allow-Headers’, ‘Origin, X-Requested-With, Content-Type, Accept’);
next();
});
app.get(‘/datos’, (req, res) => {
res.json({ mensaje: ‘Esto es un mensaje CORS-friendly!’ });
});
app.listen(3000, () => {
console.log(‘Servidor escuchando en el puerto 3000’);
});
En este código, se usan los métodos `header()` de la respuesta para establecer las cabeceras `Access-Control-Allow-Origin` y `Access-Control-Allow-Headers`, lo que indica al navegador que la API está dispuesta a aceptar peticiones CORS de cualquier origen y con ciertos encabezados.
#### Uso de Middleware de CORS
Además, en lugar de manejar manualmente las cabeceras, se pueden usar módulos que simplifiquen esta tarea. Un ejemplo popular en Express es el middleware `cors`:
javascript
const express = require(‘express’);
const cors = require(‘cors’);
const app = express();
app.use(cors());
// Rutas de la aplicación
app.get(‘/datos’, (req, res) => {
res.json({ mensaje: ‘¡Ahora con soporte CORS!’ });
});
app.listen(3000, () => {
console.log(‘Aplicación ejecutándose en el puerto 3000’);
});
El paquete `cors` expone una función que se puede usar como middleware en aplicaciones de Express para habilitar fácilmente las cabeceras de CORS en todas las rutas y respuestas.
### Prácticas Recomendadas para CORS
Cuando configures las cabeceras CORS, ten en cuenta que:
– No se recomienda usar el comodín ‘*’ en producciones serias, ya que esto permitiría que cualquier sitio pueda hacer peticiones a tu servidor. Lo ideal es especificar explícitamente los **orígenes permitidos**.
– Si tu API requiere autenticación o manejo de sesiones, también deberías incluir `Access-Control-Allow-Credentials` en las cabeceras para permitir enviar cookies o encabezados de autorización.
– Mejora la seguridad definiendo explícitamente los métodos permitidos mediante la cabecera `Access-Control-Allow-Methods`.
### Conclusion
Manejar correctamente los errores de CORS es imprescindible para el desarrollo de aplicaciones web modernas. La configuración adecuada de las cabeceras CORS en el servidor garantiza que tu aplicación pueda comunicarse con otras APIs sin comprometer la seguridad de los usuarios. Recuerda siempre probar estas configuraciones en un entorno de desarrollo seguro antes de llevar tus cambios a producción.