Neste artigo
O que e CORS?
Cross-Origin Resource Sharing (CORS) e um mecanismo de segurança do navegador que controla quais origens web podem aceder aos recursos do seu servidor. Por defeito, os navegadores aplicam a politica de mesma origem, bloqueando pedidos JavaScript para um dominio, porta ou protocolo diferente.
Os cabeçalhos CORS indicam ao navegador quais pedidos cross-origin permitir. Sem os cabeçalhos corretos, chamadas API de um frontend num dominio para um backend noutro falharão com um erro CORS. Um gerador de cabeçalhos CORS cria os cabeçalhos Access-Control-Allow-* corretos.
Como funcionam os cabeçalhos CORS
CORS funciona atraves de um conjunto de cabeçalhos de resposta HTTP que o servidor envia para indicar quais origens, metodos e cabeçalhos sao permitidos.
- Access-Control-Allow-Origin — especifica quais origens podem aceder ao recurso (um dominio especifico ou * para qualquer origem)
- Pedidos preflight — para pedidos não simples, os navegadores enviam primeiro um pedido OPTIONS para verificar se o pedido real e permitido
- Tratamento de credenciais — Access-Control-Allow-Credentials: true permite cookies e cabeçalhos de autenticação, mas requer uma origem especifica
Experimente gratuitamente — sem cadastro
Gerar cabeçalhos CORS →Quando configurar CORS
A configuração CORS e necessaria quando o frontend e backend sao servidos a partir de origens diferentes.
- Desenvolvimento API — APIs REST ou GraphQL acedidas por apps frontend em dominios diferentes precisam de cabeçalhos CORS
- Configuração CDN — servir assets estaticos a partir de um subdominio CDN requer CORS para ficheiros de fontes e pedidos API
- Microsserviços — serviços a correr em portas diferentes durante o desenvolvimento local precisam de CORS para comunicar atraves do navegador
Perguntas frequentes
Porque não posso usar Access-Control-Allow-Origin: * para tudo?
O wildcard * permite qualquer origem, o que e adequado para APIs publicas. No entanto, não pode ser usado com credenciais (cookies, cabeçalhos Authorization). Se a sua API requer autenticação, deve especificar a origem exata.
O que e um pedido preflight?
Um preflight e um pedido HTTP OPTIONS que o navegador envia automaticamente antes do pedido real. Verifica se o servidor permite o metodo, os cabeçalhos e a origem.
Como corrijo o erro 'No Access-Control-Allow-Origin header'?
Adicione o cabeçalho Access-Control-Allow-Origin a resposta do seu servidor com o dominio da origem solicitante. Para Express use o middleware cors, para Nginx adicione diretivas add_header.