Testador CORS

Teste e depure as políticas de Compartilhamento de Recursos de Origem Cruzada (CORS) e as solicitações de API

Configurações da Solicitação

Configure sua solicitação de API para teste

URL

Método HTTP

Cabeçalhos

Solicitações de Exemplo

Experimente estas solicitações de API predefinidas

Informações sobre CORS

Informações básicas sobre CORS

O que é CORS? CORS (Cross-Origin Resource Sharing) é um mecanismo que permite que os navegadores da web façam solicitações de origem cruzada (domínio, protocolo ou porta diferentes) a partir de scripts em execução no navegador.

Cabeçalhos CORS Chave

Access-Control-Allow-Origin: Especifica quais origens têm permissão para acessar o recurso
Access-Control-Allow-Methods: Especifica quais métodos HTTP são permitidos
Access-Control-Allow-Headers: Especifica quais cabeçalhos HTTP podem ser usados
Access-Control-Allow-Credentials: Especifica se devem ser incluídas credenciais (cookies, autenticação HTTP)

💡 Soluções CORS

Soluções do Lado do 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 { ... }

Soluções do Lado do Cliente

1. Usando um Servidor Proxy:

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

2. JSONP (apenas GET):

// Solução limitada, mas simples
          fetch('api?callback=handleResponse')

🔧 Configuração CORS por Ambiente

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"

Configuração CORS por Ambiente

Cenários de Teste

• Solicitação Simples: Teste o comportamento básico do CORS com solicitações GET
• Solicitação Preflight: Teste solicitações preflight com métodos PUT/DELETE
• Cabeçalhos Personalizados: Teste solicitações com cabeçalho de Autorização
• Credenciais: Teste solicitações com cookies
• Tratamento de Erros: Teste cenários de falha

Considerações de Segurança

• Tenha cuidado com o uso de curinga (*) devido a riscos de segurança
• Princípio do menor privilégio: permita apenas as origens e métodos necessários
• Restrições de credenciais: permita apenas origens específicas ao incluir credenciais
• Revisão regular: revise e atualize periodicamente as políticas CORS