Como solucionar erros de CORS da minha API do API Gateway?

Última atualização: 2021-01-27

Recebo o erro “Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado” quando tento invocar minha API do Amazon API Gateway. Como solucionar o erro?

Descrição breve

Erros de compartilhamento de recursos entre origens (CORS) ocorrem quando um servidor não retorna os cabeçalhos HTTP exigidos pelo padrão CORS. Para resolver um erro de CORS em uma API REST do API Gateway ou API HTTP, reconfigure a API para atender ao padrão CORS.

Para obter mais informações sobre como habilitar o CORS para APIs REST, consulte Habilitar o CORS para um recurso da API REST. Para APIs HTTP, consulte Configurar o CORS para uma API HTTP.

Observação: o CORS deve ser habilitado no nível do recurso e pode ser manipulado usando configurações do API Gateway ou integrações de backend, como o AWS Lambda.

Resolução

O exemplo a seguir mostra como solucionar o erro de CORS Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente. No entanto, você pode usar um procedimento semelhante para solucionar todos os erros de CORS. Por exemplo: erros de Método sem suporte no cabeçalho Access-Control-Allow-Methods e erros de Nenhum cabeçalho “Access-Control-Allow-Headers” presente.

Observação: o erro de Nenhum cabeçalho 'Access-Control-Allow-Origin' presente pode ocorrer por qualquer um dos seguintes motivos:

  • A API não está configurada com um método OPTIONS que retorna os cabeçalhos CORS necessários.
  • Outro tipo de método (como GET, PUT ou POST) não está configurado para retornar os cabeçalhos CORS necessários.
  • Uma API com integração de proxy ou integração sem proxy não está configurada para retornar os cabeçalhos CORS necessários.
  • Para uma API REST privada, o URL de invocação incorreto é chamado, ou o tráfego não está sendo roteado ao endpoint da nuvem privada virtual (VPC) da interface.

Confirme a causa do erro

Existem duas maneiras de confirmar a causa de um erro de CORS no API Gateway:

  • Crie um arquivo HTTP (HAR) ao invocar sua API. Em seguida, confirme a causa do erro no arquivo, verificando os cabeçalhos nos parâmetros retornados na resposta da API.
  • Use as ferramentas do desenvolvedor no seu navegador para verificar os parâmetros da solicitação e da resposta da solicitação de API com falha.

Habilitar o CORS no recurso de API que está apresentando o erro

Para APIs REST, consulte Habilitar o CORS em um recurso usando o console do API Gateway. Para APIs HTTP, consulte Configurar o CORS para uma API HTTP.

Importante: se você configurar o CORS para uma API HTTP, o API Gateway enviará automaticamente uma resposta a solicitações OPTIONS de simulação, mesmo que não haja uma rota OPTIONS configurada para a sua API. Para uma solicitação CORS, o API Gateway adiciona os cabeçalhos CORS configurados à resposta de uma integração.

Ao habilitar o CORS, certifique-se de fazer o seguinte:

  • Para Gateway Responses for <api-name> API (Respostas do gateway para - nome da API), marque as caixas de seleção DEFAULT 4XX e DEFAULT 5XX.

Observação: quando você seleciona essas opções padrão, o API Gateway responde com os cabeçalhos CORS necessários, mesmo quando uma solicitação não chega ao endpoint. Por exemplo, se uma solicitação incluir um caminho de recurso incorreto, o API Gateway ainda responderá com um o erro 403 “Missing Authentication Token” (Token de autenticação ausente).

  • Para Methods (Métodos), marque a caixa de seleção do método OPTIONS se ela ainda não estiver marcada. Além disso, marque as caixas de seleção para todos os outros métodos disponíveis para solicitações CORS. Por exemplo: GET, PUT e POST.

Observação: habilitar o CORS no console do API Gateway adicionará um método OPTIONS ao recurso se ele ainda não existir. Isso também configura a resposta 200 do método OPTIONS com os cabeçalhos Access-Control-Allow-* necessários. Se você já tiver habilitado o CORS usando o console, habilitá-lo novamente substituirá os valores existentes.

Configure as integrações da API REST para retornar os cabeçalhos CORS necessários

Configure sua função de backend do AWS Lambda ou o servidor HTTP para enviar os cabeçalhos CORS necessários em sua resposta. Para retornar uma lista de domínios em Access-Control-Allow-Origin, você deve configurar seu backend para enviar os nomes de domínios em uma lista como o valor do cabeçalho Access-Control-Allow-Origin.

Importante: se você usar uma integração de proxy, não poderá configurar uma resposta de integração no API Gateway para modificar os parâmetros de resposta retornados pelo backend da API. Em uma integração de proxy, o API Gateway encaminha a resposta do backend diretamente ao cliente.

Se você usar uma integração não proxy, configure manualmente uma resposta de integração no API Gateway para retornar os cabeçalhos CORS necessários.

Observação: para APIs com uma integração não proxy, habilitar o CORS em um recurso usando o console do API Gateway adiciona automaticamente os cabeçalhos CORS necessários a esse recurso.

Verifique a configuração de DNS privado do endpoint da interface (somente para APIs REST privadas)

Para APIs REST privadas, determine se o DNS privado está habilitado para o endpoint da VPC da interface associado.

Se o DNS privado estiver habilitado para o endpoint da interface, chame sua API privada de dentro da Amazon Virtual Private Cloud (Amazon VPC) usando o nome do DNS privado para evitar erros de CORS.

Se o DNS privado não estiver habilitado, roteie manualmente o tráfego da URL de invocação aos endereços IP do endpoint da VPC.

Observação: use o seguinte URL de invocação, independentemente de o DNS privado estar habilitado ou não: https://api-id.execute-api.region.amazonaws.com/stage-name. Certifique-se de substituir os valores de api-id, region e stage-name pelos valores necessários para a sua API. 

Para obter mais informações, consulte Como invocar uma API privada.

Importante: se o CORS estiver habilitado quando o DNS privado não estiver habilitado, lembre-se das seguintes limitações:

  • Não é possível usar nomes de DNS públicos específicos do endpoint para acessar sua API privada de dentro da Amazon VPC.
  • Não é possível usar a opção de cabeçalho Host, pois as solicitações de um navegador não permitem a manipulação do cabeçalho Host.
  • Não é possível usar o cabeçalho personalizado x-apigw-api-id, pois ele aciona uma solicitação OPTIONS de simulação que não inclui o cabeçalho. As chamadas de API que usam o cabeçalho x-apigw-api-id não chegarão à API.

Este artigo ajudou?


Precisa de ajuda com faturamento ou suporte técnico?