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

URL

Método HTTP

Encabezados

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