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?

Data da última atualização: 16/06/2022

Observação: se receber erros ao executar comandos da AWS Command Line Interface (AWS CLI), verifique se está usando a versão mais recente da AWS CLI.

Execute o comando a seguir para confirmar se o servidor de origem retorna o cabeçalho Access-Control-Allow-Origin. Substitua example.com pelo cabeçalho de origem necessário. Substitua https://www.example.net/video/call/System.generateId.dwr pela URL do recurso que está retornando o erro de cabeçalho.

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

Se a política CORS permitir que o servidor de origem retorne o cabeçalho Access-Control-Allow-Origin, você verá uma resposta semelhante à seguinte:

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

Se os cabeçalhos CORS não forem retornados na resposta, o servidor de origem não está configurado corretamente para CORS. Configure uma política CORS na origem personalizada ou na origem do Amazon Simple Storage Service (Amazon S3).

Depois de configurar uma política CORS no servidor de origem, configure sua distribuição do CloudFront para encaminhar os cabeçalhos de origem ao servidor de origem. Se a sua origem for um bucket do S3, normalmente você deve configurar sua distribuição para encaminhar os seguintes cabeçalhos ao Amazon S3:

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

Para encaminhar os cabeçalhos ao servidor de origem, o CloudFront tem duas políticas predefinidas, dependendo do seu tipo de origem: CORS-S3Origin e CORS-CustomOrigin.

Para adicionar uma política predefinida à sua distribuição:

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 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 Criar políticas de cache.
5. Escolha Create Behavior (Criar comportamento). Ou escolha Save changes (Salvar alterações) se estiver editando um comportamento existente.

Para encaminhar os cabeçalhos usando uma política de cache:

1. Crie uma política de cache.
2. Em Cache key settings (Configurações da chave de cache), para Headers (Cabeçalhos), escolha 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. Preencha as configurações da política de cache, conforme exigido pelo comportamento ao qual você está anexando a política.
4. Anexe a política de cache ao comportamento da sua distribuição do CloudFront.

Para encaminhar os cabeçalhos usando configurações de cache herdadas:

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. Escolha Add custom (Adicionar personalizado) para adicionar cabeçalhos exigidos pela sua origem que não aparecem na lista suspensa.
6. Escolha Create Behavior (Criar comportamento). Ou escolha Save changes (Salvar alterações) se estiver editando um comportamento existente.

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.

Se você ainda vir erros após atualizar sua política CORS e encaminhar os cabeçalhos apropriados, permita o método HTTP OPTIONS no comportamento de cache da sua distribuição. Por padrão, o CloudFront apenas permite os métodos GET e HEAD. No entanto, alguns navegadores da Web podem emitir solicitações para o método OPTIONS. Para ativar o método OPTIONS na sua distribuição do CloudFront:

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 escolha Edit (Editar).
4. Para Allowed HTTP Methods (Métodos HTTP permitidos), selecione GET, HEAD, OPTIONS.
5. Escolha Create Behavior (Criar comportamento). Ou escolha Save changes (Salvar alterações) se estiver editando um comportamento existente.

Se o servidor de origem não estiver acessível ou não puder ser configurado para retornar os cabeçalhos CORS apropriados, configure um CloudFront para retornar os cabeçalhos CORS necessários. Para configurar, crie políticas de cabeçalhos de resposta:

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 escolha Edit (Editar).
4. Para Response headers policy (Política de cabeçalhos de resposta):
   Selecione uma política de resposta existente na lista suspensa.
   -ou-
   Escolha Create policy (Criar política) para criar uma nova política de cabeçalhos de resposta. Na nova política, em Cross-origin resource sharing (Compartilhamento de recursos de origem cruzada), ative o CORS.
5. Preencha outras configurações conforme necessário e escolha Create policy (Criar política).
6. Na página Create Behavior (Criar comportamento), escolha a política que você criou na lista suspensa.
7. Escolha Create Behavior (Criar comportamento). Ou escolha Save changes (Salvar alterações) se estiver editando um comportamento existente.

Observação: o CloudFront normalmente implanta alterações em sua distribuição em cinco minutos. Depois de editar sua distribuição, invalide o cache para limpar as respostas armazenadas em cache anteriormente.