toolsmoah

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
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

Dicas de Depuração CORS

Ferramentas de Desenvolvedor do Navegador

  • • Verifique as solicitações OPTIONS na guia Rede
  • • Procure por mensagens de erro CORS no Console
  • • Verifique os cabeçalhos CORS nos Cabeçalhos da Resposta

Ferramentas Úteis

  • • Testador CORS (esta ferramenta)
  • • Postman (para teste de API)
  • • comando curl (para teste direto do servidor)