Cómo evitar la política CORS durante el desarrollo
Este mini artículo te explica cómo evitar CORS (Cross-origin resource sharing) durante el desarrollo de sitios web o apps móviles (iOS y Android).
Cómo evitar la política CORS durante el desarrollo de apps
Básicamente, CORS es un mecanismo que usa encabezados HTTP adicionales para indicarle al navegador qué dominios pueden acceder a los recursos restringidos. Puedes leer la documentación técnica completa sobre CORS en MDN
Esto podría ocurrir si:
- Accedes a un endpoint de producción desde tu sitio web en localhost
- Tu app de iOS o Android en desarrollo intenta acceder a un endpoint de producción
Podrías encontrarte con el siguiente error:
Access to fetch at https://your-production-endpoint.com from origin http://localhost:8080 has been blocked by CORS Policy.
Fuente: Rodrigo Fernández
Cómo evitar CORS
La solución sencilla para evitar el mecanismo CORS es inyectar ciertos encabezados HTTP en la respuesta.
Hay muchas soluciones si usas Proxyman para depurar, y se logran fácilmente con Scripting Tool o Map Local Tool.
Scripting Tool
Scripting Tool te permite inyectar cualquier encabezado en la solicitud o respuesta coincidente.
Es una herramienta práctica para inyectar encabezados CORS en todas las respuestas con las que estás trabajando.
- Crea una Matching Rule para tu dominio. La Matching Rule de Scripting puede ser http://localhost:8080 o https://dev.mydomain.com
- Configura el script e inyecta el encabezado Access-Control-Allow-Origin en la respuesta
///
/// This func is called if the Response Checkbox is Enabled
/// You can manipulate the Response Data here before it goes to the client
/// Ex: Add/Update/Remove: headers, statusCode and body (json, plain-text)
/// Use console.log(response) to see all available fields
///
function onResponse(context, url, request, response) {
// Allow all
response.headers["Access-Control-Allow-Origin"] = "*";
// Done
return response;
}
Map Local File
Es posible usar Map Local File para evitar CORS.
- Crea una Map Local Rule desde cero o a partir del Flow seleccionado
- Define la regla que cubra las URL
- Añade Access-Control-Allow-Origin: * en la sección Header
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Access-Control-Allow-Origin: *
{
"status": "ok"
}
Map Local Directory
Si mapeas con un directorio local, puedes lograrlo combinando Map Local con Scripting Tool.
- Configura Map Local Directory correctamente -> asegúrate de haber mapeado bien antes de pasar al siguiente paso
- Crea una Scripting Rule que coincida con la misma URL
- Inyecta el encabezado Access-Control-Allow-Origin en la respuesta
///
/// This func is called if the Response Checkbox is Enabled
/// You can manipulate the Response Data here before it goes to the client
/// Ex: Add/Update/Remove: headers, statusCode and body (json, plain-text)
/// Use console.log(response) to see all available fields
///
function onResponse(context, url, request, response) {
// Allow all
response.headers["Access-Control-Allow-Origin"] = "*";
// Done
return response;
}
Documentación
Puedes leer más en:
- Scripting Tool: https://proxyman.com/docs/scripting/script
- Addons y fragmentos de código: https://proxyman.com/docs/scripting/addons
- Map Local: https://proxyman.com/docs/advanced-features/map-local
Importante: úsalo solo para pruebas
Modificar la respuesta en Proxyman te ayuda a seguir trabajando en local, pero no corrige el servidor para los usuarios reales. El servidor de producción solo debe permitir los orígenes, métodos y encabezados que necesita tu app. Si el navegador envía una solicitud preflight OPTIONS, asegúrate de que esa respuesta también incluya los encabezados CORS correctos. Evita Access-Control-Allow-Origin: * cuando haya credenciales o datos privados de por medio.
Proxyman es una app de macOS de alto rendimiento que permite a los desarrolladores capturar e inspeccionar solicitudes HTTP/HTTPS de apps y dominios en dispositivos iOS, el simulador de iOS y dispositivos Android.
Descárgala en https://proxyman.com
