Como resolvo o erro "No 'Access-Control-Allow-Origin' header is present on the requested resource" do CloudFront?

Resolução

Confirmar se a política de compartilhamento de recursos de origem cruzada (CORS) da origem permite que a origem retorne o cabeçalho Access-Control-Allow-Origin

Observação: se você receber erros ao executar comandos da AWS Command Line Interface (AWS CLI), certifique-se de estar 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 pelo URL do recurso que está retornando o erro do 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 em sua origem personalizada ou na origem do Amazon Simple Storage Service (Amazon S3).

Configurar a distribuição do CloudFront para encaminhar os cabeçalhos apropriados para o servidor de origem

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

• Access-Control-Request-Headers
• Access-Control-Request-Method
• Origem

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

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

1. Abra a distribuição a partir do console do CloudFront.
2. Escolha a guia Comportamentos.
3. Escolha Criar comportamento. Ou selecione um comportamento existente e escolha Editar.
4. Em Chave de cache e solicitações de origem, escolha Política de cache e política de solicitação de origem. Em seguida, para a 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 Criar comportamento. Ou escolha 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 Configurações da chave de cache, em Cabeçalhos, selecione Incluir os cabeçalhos a seguir. Na lista suspensa Adicionar cabeçalho, escolha um dos cabeçalhos exigidos por 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 as configurações de cache herdadas:

1. Abra a distribuição a partir do console do CloudFront.
2. Escolha a guia Comportamentos.
3. Escolha Criar comportamento. Ou selecione um comportamento existente e escolha Editar.
4. Em Chave de cache e solicitações de origem, selecione Configurações de cache herdadas.
5. Na lista suspensa Cabeçalhos, escolha os cabeçalhos exigidos pela sua origem. Escolha Adicionar personalizado para adicionar cabeçalhos exigidos pela sua origem que não aparecem na lista suspensa.
6. Escolha Criar comportamento. Ou escolha Salvar alterações se estiver editando um comportamento existente.

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

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

Se ainda encontrar erros após atualizar a política CORS e encaminhar os cabeçalhos apropriados, permita o método HTTP OPTIONS no comportamento de cache da distribuição. Por padrão, o CloudFront só 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 distribuição do CloudFront:

1. Abra a distribuição a partir do console do CloudFront.
2. Escolha a guia Comportamentos.
3. Escolha Criar comportamento. Ou selecione um comportamento existente e escolha Editar.
4. Em Métodos HTTP permitidos, selecione GET, HEAD, OPTIONS.
5. Escolha Criar comportamento. Ou escolha Salvar alterações se estiver editando um comportamento existente.

Configure a política de resposta do CloudFront para retornar os cabeçalhos Access-Control-Allow-Origin necessários

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 a distribuição a partir do console do CloudFront.
2. Escolha a guia Comportamentos.
3. Escolha Criar comportamento. Ou selecione um comportamento existente e escolha Editar.
4. Em Política de cabeçalhos de resposta:
   Selecione uma política de resposta existente na lista suspensa.
   -ou-
   Escolha Criar política para criar uma nova política de cabeçalhos de resposta. Na nova política, em Compartilhamento de recursos de origem cruzada, ative o CORS.
5. Preencha outras configurações conforme necessário e escolha Criar política.
6. Na página Criar comportamento, escolha a política que você criou na lista suspensa.
7. Escolha Criar comportamento. Ou escolha Salvar alterações se estiver editando um comportamento existente.

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

Informações relacionadas

Configuração do CloudFront para respeitar as configurações do CORS

Configurar o compartilhamento de recursos de origem cruzada (CORS)

Usar as políticas de cabeçalhos de resposta gerenciadas

Adicionar um cabeçalho de compartilhamento de recursos de origem cruzada (CORS) à resposta