toolsmoah

Probador de CORS

Pruebe y depure las políticas de Cross-Origin Resource Sharing (CORS) y las solicitudes de API

Configuración de Solicitud
Configure su solicitud de API para la prueba
Ejemplos de Solicitudes
Pruebe estas solicitudes de API predefinidas
Información de CORS
Información básica sobre CORS

¿Qué es CORS? CORS (Cross-Origin Resource Sharing) es un mecanismo que permite a los navegadores web realizar solicitudes de origen cruzado (dominio, protocolo o puerto diferente) desde scripts que se ejecutan en el navegador.

Encabezados CORS Clave

  • Access-Control-Allow-Origin: Especifica qué orígenes tienen permitido acceder al recurso
  • Access-Control-Allow-Methods: Especifica qué métodos HTTP están permitidos
  • Access-Control-Allow-Headers: Especifica qué encabezados HTTP se pueden usar
  • Access-Control-Allow-Credentials: Especifica si se deben incluir credenciales (cookies, autenticación HTTP)

💡 Soluciones CORS

Soluciones del Lado del Servidor

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

Soluciones del Lado del Cliente

1. Usando un Servidor Proxy:

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP (solo GET):

// Solución limitada pero simple
          fetch('api?callback=handleResponse')

🔧 Configuración de CORS por Entorno

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

location /api {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 
              "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers 
              "Content-Type, Authorization";
          }

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

Configuración de CORS por Entorno

Escenarios de Prueba

  • • Solicitud Simple: Pruebe el comportamiento básico de CORS con solicitudes GET
  • • Solicitud Previa: Pruebe las solicitudes previas con métodos PUT/DELETE
  • • Encabezados Personalizados: Pruebe las solicitudes con el encabezado de Autorización
  • • Credenciales: Pruebe las solicitudes con cookies
  • • Manejo de Errores: Pruebe los escenarios de falla

Consideraciones de Seguridad

  • • Tenga cuidado con el uso de comodines (*) debido a riesgos de seguridad
  • • Principio de privilegio mínimo: Solo permita los orígenes y métodos necesarios
  • • Restricciones de credenciales: Solo permita orígenes específicos al incluir credenciales
  • • Revisión regular: Revise y actualice periódicamente las políticas de CORS

Consejos de Depuración de CORS

Herramientas de Desarrollo del Navegador

  • • Verifique las solicitudes OPTIONS en la pestaña Red
  • • Busque mensajes de error de CORS en la Consola
  • • Verifique los encabezados CORS en los Encabezados de Respuesta

Herramientas Útiles

  • • Probador de CORS (esta herramienta)
  • • Postman (para pruebas de API)
  • • Comando curl (para pruebas directas del servidor)