0
respostas

Solução | Problema com o CORS policy

Eai, devs!

Fazendo o curso me deparei com o erro de:

Access to XMLHttpRequest at 'https://s3.amazonaws.com/SEU-BUCKET-COM-FRONTEND/dados.json' from origin 'http://SEU-BUCKET-COM-FRONTEND.s3-website-us-east-1.amazonaws.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Acontece que no vídeo o professor acaba utilizando um xml, um tipo de dado que não é mais suportado para as políticas CORS do S3 (aceita somente json). Então para contornar isso, utilizei o seguinte json.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Feito isso, no código de frontend disponibilizado pelo professor, onde se encontra:

$.ajax(
  { url: 'https://s3.amazonaws.com/rekognition-front-end/dados.json',
   dataType: 'json',
   crossDomain: true,
   success: function (dados) {
      console.log(dados);
      montaTabela(dados);
      }
  })

Incluí:

$.ajax(
  { url: 'https://s3.amazonaws.com/rekognition-front-end/dados.json',
   dataType: 'json',
   crossDomain: true,
   headers: { 'Access-Control-Allow-Origin': true },
   success: function (dados) {
      console.log(dados);
      montaTabela(dados);
      }
  })

Descobri isso através da depuração do console do navegador, conforme a mensagem de erro exemplo que coloquei acima. E, da mesma forma, com a mensagem de erro sobre ausência de cabeçalho "Access-Control-Allow-Origin", fiz a inclusão do mesmo.

Abraços e bons estudos!