Como resolvo o erro “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” (Cabeçalho “Access-Control-Allow-Origin” ausente no recurso solicitado) do CloudFront?

Última atualização: 14-09-2021

Estou encaminhando o cabeçalho de origem da minha distribuição do Amazon CloudFront, mas recebo a mensagem de erro “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” (Cabeçalho “Access-Control-Allow-Origin” ausente no recurso solicitado). Como resolvo esse erro?

Breve descrição

Para evitar o erro "No ‘Access-Control-Allow-Origin’ header is present on the requested resource” (Cabeçalho “Access-Control-Allow-Origin” ausente no recurso solicitado)", verifique o seguinte:

  • A política de compartilhamento de recurso entre origens (CORS) da origem permite que ela retorne o cabeçalho “Access-Control-Allow-Origin”.
  • A distribuição do CloudFront encaminha os cabeçalhos apropriados.
  • O comportamento de cache da distribuição do CloudFront permite o método OPTIONS para solicitações HTTP.

Resolução

A política de CORS da origem permite que ela retorne o cabeçalho “Access-Control-Allow-Origin”

Confira se a origem retorna o cabeçalho “Access-Control-Allow-Origin” executando um comando curl semelhante a este:

curl -H "origin: example.com" -v "https://www.anything.net/video/call/System.generateId.dwr"

Se a política de CORS permitir que a origem retorne o cabeçalho, o comando retornará uma mensagem semelhante a esta:

HTTP/1.1 200 OK
Server: nginx/1.10.2
Date: Mon, 01 May 2018 03:06:41 GMT
Content-Type: text/html
Content-Length: 3770
Last-Modified: Thu, 16 Mar 2017 01:50:52 GMT
Connection: keep-alive
ETag: "58c9ef7c-eba"
Access-Control-Allow-Origin:
    example.com
Accept-Ranges: bytes

Para atualizar a política CORS para uma origem no NGINX, consulte CORS no NGINX para obter instruções. Para atualizar a política de uma origem que é um bucket do Amazon Simple Storage Service (Amazon S3), consulte a configuração do CORS para obter instruções.

A distribuição do CloudFront encaminha os cabeçalhos apropriados

Depois de configurar CORS na origem, configure sua distribuição do CloudFront para encaminhar os cabeçalhos exigidos pela origem. Se sua origem for um bucket do S3, normalmente você deve configurar sua distribuição para encaminhar os seguintes cabeçalhos para o Amazon S3:

  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Origin

Para ativar o CORS para S3 ou uma origem personalizada, você precisa passar os cabeçalhos necessários para a origem. O CloudFront tem duas políticas predefinidas, dependendo do tipo de origem usado: CORS-S3Origin e CORS-CustomOrigin. Para adicionar essas políticas à sua distribuição, siga estas etapas:

  1. Abra sua distribuição no console do CloudFront.
  2. Escolha a guia Behaviors (Comportamentos).
  3. Escolha Create Behavior (Criar comportamento). Ou selecione um comportamento existente e, em seguida, escolha Edit (Editar).
  4. Em Cache key and origin requests (Chave de cache e solicitações de origem), escolha Cache policy and origin request policy (Política de cache e política de solicitação de origem). Em seguida, para Origin request policy (Política de solicitação de origem), escolha CORS-S3Origin ou CORS-CustomOrigin na lista suspensa. Para obter mais informações, consulte Uso de políticas de solicitação de origem gerenciadas.
    Observação: para criar sua própria política de cache, consulte as seções a seguir.
  5. Escolha Save changes (Salvar alterações). Se você estiver criando o comportamento, escolha Create Behavior (Criar comportamento).

Para encaminhar os cabeçalhos usando uma política de solicitação de origem, siga estas etapas:

  1. Siga as etapas para criar uma política de cache usando o console do CloudFront.
  2. Em Cache key settings (Configurações da chave de cache), para Headers (Cabeçalhos), selecione Include the following headers (Incluir os seguintes cabeçalhos). Na lista suspensa Add header (Adicionar cabeçalho), escolha um dos cabeçalhos exigidos pela sua origem.
  3. Conclua todas as outras configurações da política de cache com base nos requisitos do comportamento ao qual você está anexando a política.
  4. Siga as etapas para anexar a política de cache ao comportamento relevante da sua distribuição do CloudFront.

Para encaminhar os cabeçalhos usando as configurações de cache herdadas, siga estas etapas:

  1. Abra sua distribuição no console do CloudFront.
  2. Escolha a guia Behaviors (Comportamentos).
  3. Escolha Create Behavior (Criar comportamento). Ou selecione um comportamento existente e, em seguida, escolha Edit (Editar).
  4. Em Cache key and origin requests (Chave de cache e solicitações de origem), selecione Legacy cache settings (Configurações de cache herdadas).
  5. Na lista suspensa Headers (Cabeçalhos), escolha os cabeçalhos exigidos pela sua origem. Se necessário, escolha Add custom (Adicionar personalizado) para adicionar os cabeçalhos exigidos por sua origem que não estão na lista suspensa.
  6. Escolha Save changes (Salvar alterações). Se você estiver criando o comportamento, escolha Create Behavior (Criar comportamento).

Observação: encaminhe também o cabeçalho como parte da solicitação do cliente para o CloudFront, que o CloudFront encaminha para a origem.

O comportamento de cache da distribuição do CloudFront permite o método OPTIONS para solicitações HTTP

Se você continuar encontrando erros após atualizar sua política de CORS e encaminhar os cabeçalhos apropriados, tente permitir o método HTTP OPTIONS no comportamento de cache da sua distribuição. Por padrão, o CloudFront permite apenas os métodos GET e HEAD, mas alguns navegadores da Web podem emitir solicitações para o método OPTIONS.

Para ativar o método OPTIONS em sua distribuição do CloudFront, siga estas etapas:

  1. Abra sua distribuição no console do CloudFront.
  2. Escolha a guia Behaviors (Comportamentos).
  3. Escolha Create Behavior (Criar comportamento). Ou selecione um comportamento existente e, em seguida, escolha Edit (Editar).
  4. Para Allowed HTTP Methods (Métodos HTTP permitidos), selecione GET, HEAD, OPTIONS.
  5. Escolha Save changes (Salvar alterações). Se você estiver criando o comportamento, escolha Create Behavior (Criar comportamento).

Observação: o CloudFront normalmente implanta alterações em sua distribuição em cinco minutos. Depois de editar sua distribuição, considere invalidar o cache, pois, do contrário, você ainda poderá obter respostas armazenadas em cache anteriormente.


Este artigo ajudou?


Precisa de ajuda com faturamento ou suporte técnico?