Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como definir CORS policy

Pessoal, boa tarde! Estou tentando consumir uma API desenvolvemendo um código em um arquivo .html rodando direto do navegador, sem backend. Com esse código tenho o seguinte erro na console:

Access to fetch at 'http://hml.sinter.irtdpjsp.com.br/api/extrato' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Pelo que entendi nos meus estudos e pesquisas, parece que a CORS policy depende da solicitação ser feita no backend, é isso mesmo? Eu devo montar um servidor e fazer configurações de CORS para que meu código funcione corretamente?

Aguardo com gratidão a orientação do pessoal mais avançado para que possa continuar meus estudos! Grande abraço!

<script>

      var token = `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI

        fetch('http://hml.sinter.irtdpjsp.com.br/api/extrato', {
          method: "GET",
          Headers: {
          "Content-Type": "application/json",
          "x-access-token": token
          }
        })      
    </script>
3 respostas

Fala ai Douglaas, tudo bem? É isso mesmo, basicamente de uma maneira simples e resumida, o que é CORS?

Ele é uma maneira da qual a gente consegue garantir que somente a nossa aplicação vai chamar a nossa API, ou seja, somente o front da Alura pode requisitar dados para o back da Alura (por exemplo).

Para que isso funcione, o navegador envia um cabeçalho Origin durante a requisição, dessa maneira, no back, você consegue configurar o CORS para X dominios.

Exemplo: Vou configurar o CORS para o meu back aceitar requisições da: alura.com.br, google.com e facebook.com. Qualquer outro domínio (dns + porta) que tente requisitar eu quero travar.

E lembrando que o CORS existe apenas nos navegadores por questões de segurança. Se você tentar realizar requisições com curl por exemplo, pode notar que não existe o controle de CORS.

E para configurar o CORS, depende muito de cada linguagem, no Node por exemplo você pode usar a biblioteca cors e passar para o Express ou Koa (outro outro player que esteja controlando o seu servidor).

Espero ter ajudado.

Oi Matheus, tudo bom? Sua explicação foi ótima. Então vou estudar CORS para entender melhor como tudo isso funciona. De agradeço de coração pela bela explicação!! Grande abraço!

solução!

Magina Douglas, sempre que precisar não deixe de criar suas dúvidas.

Se estiver usando Node: https://www.npmjs.com/package/cors

Essa é a lib que comentei anteriormente.

Abraços e bons estudos.