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

6 minuto de leitura
0

Recebo o erro “No 'Access-Control-Allow-Origin' header is present on the requested resource” (Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado) quando tento invocar minha API do Amazon API Gateway. Como solucionar esse erro e outros erros de CORS do API Gateway?

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 configurar o CORS para APIs REST, consulte Como ativar 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 configurado 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 procedimento usado como 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.
  • (somente para APIs REST privadas) O URL de invocação incorreto é chamado, ou o tráfego não está sendo roteado ao endpoint da Virtual Private Cloud (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 Archive (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.
    -ou-
  • 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.

Configurar o CORS no recurso da API que está apresentando o erro

Para APIs REST

Siga as instruções para Ativar o CORS em um recurso usando o console do API Gateway.

Para APIs HTTP

Siga as instruções em Configurar o CORS para uma API HTTP.

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

Ao configurar o CORS em seu recurso da API, 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 erro 403 “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: configurar 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á configurou o CORS usando o console, configurá-lo novamente substituirá todos 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. Tenha em mente o seguinte:

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

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

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

Se o DNS privado estiver ativado

Certifique-se de invocar sua API privada de dentro da Amazon Virtual Private Cloud (Amazon VPC) usando o nome DNS privado.

Se o DNS privado não estiver ativado

Roteie manualmente o tráfego da URL de invocação aos endereços IP do endpoint da VPC.

Observação: você deve usar o seguinte URL de chamada, independentemente de o DNS privado estar ativado 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 configurado quando o DNS privado não estiver ativado, 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 inicia 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.

Informações relacionadas

Testar o CORS

Ativar o CORS em um recurso usando a API de importação o API Gateway