‫Jonas: Nesta aula, vamos
‫implementar algo chamado CORS, que significa compartilhamento de recursos de origem cruzada.
‫E esse é um recurso fundamental em qualquer API, mas
‫só posso mostrar isso
‫agora que o aplicativo já está implantado.
‫Agora, o que realmente é compartilhamento de recursos de origem
‫cruzada e por que precisamos implementá-lo?
‫Bem, digamos que temos nossa API
‫aqui em natours-jonas. herokuapp. com / api / v1
‫e assim por diante.
‫E então algum outro site, por exemplo, por exemplo. com, está
‫tentando acessar nossa API.
‫Então, basicamente, tentando chamar esse URL aqui.
‫E isso é então chamado de solicitação de origem
‫cruzada, porque herokuapp. com é um domínio diferente
‫do exemplo. com e, portanto, se exemplo. com está
‫tentando acessar o herokuapp. com, será
‫uma solicitação de origem cruzada, certo?
‫Agora, as solicitações de origem cruzada não são
‫permitidas e, por padrão, falharão, a menos que implementemos CORS,
‫portanto, compartilhamento de recursos de origem cruzada.
‫E já que queremos disponibilizar nossa
‫API para todos, definitivamente precisamos implementá-la, certo?
‫Agora, deixe-me realmente mostrar como isso falharia.
‫Então, vamos pegar essa
‫URL aqui, abrir na sua guia e inspecionar.
‫E então, basicamente, vamos fazer uma solicitação HTTP para nossa API aqui
‫a partir do console, ok?
‫Porque basicamente quando fizermos isso daqui,
‫também será uma solicitação de origem cruzada.
‫Então, digamos que const x é igual a
‫await e, em seguida, vamos usar a função fetch JavaScript, certo?
‫Portanto, fetch é basicamente
‫uma função um pouco semelhante à biblioteca
‫Axios que usamos em nosso
‫código, mas é JavaScript nativo no navegador
‫e, portanto, podemos apenas usá-lo aqui no console.
‫Então, digamos que queremos fazer
‫uma solicitação para nossa API de tours assim, certo?
‫Então, se tentarmos isso agora, vamos ver o que temos.
‫E de fato
‫recebemos o erro de que tentar acessar
‫este caminho aqui a partir dessa outra origem foi bloqueado pela política CORS.
‫E isso é exatamente o que eu disse antes.
‫Assim, por padrão, uma solicitação de origem
‫cruzada sempre será bloqueada.
‫A propósito, isso só se aplica a solicitações
‫feitas no navegador.
‫Por exemplo, usando a API fetch aqui, ou
‫algo como a biblioteca Axios que
‫usamos em nosso código.
‫E isso significa que a partir
‫do servidor, sempre seremos capazes de fazer solicitações de origem
‫cruzada sem problemas.
‫Portanto, não há restrições no servidor,
‫mas apenas no
‫navegador, basicamente por motivos de segurança.
‫Ah, e também para ser considerada origem cruzada, uma solicitação
‫pode vir de um domínio diferente.
‫Assim, como vimos em nosso primeiro exemplo
‫aqui, um subdomínio diferente, um protocolo diferente ou
‫mesmo uma porta diferente é considerado
‫uma solicitação de origem cruzada.
‫Por exemplo, se tivéssemos API. natours. com para nossa API
‫e, então, faria uma solicitação de natours. com, isso também
‫seria considerado uma solicitação de origem
‫cruzada e falharia, certo?
‫Mas, novamente, uma vez que queremos permitir que
‫outros sites acessem basicamente nossa API, vamos
‫agora implementar o compartilhamento de recursos de origem cruzada.
‫Tudo bem, então fazemos isso mais uma vez
‫instalando um pacote NPM.
‫Portanto, instale o NPM e simplesmente o CORS.
‫Então aqui nós exigimos esse pacote.
‫E mais uma vez, este CORS
‫aqui é uma função
‫de middleware muito simples que agora precisamos usar para nosso aplicativo, certo?
‫Então, vamos fazer isso aqui, e por que não fazer
‫bem aqui no topo?
‫Então, digamos que implemente o CORS.
‫E então app. use e chame o CORS,
‫que por sua vez retornará uma função
‫de middleware que adicionará alguns cabeçalhos diferentes
‫à nossa resposta.
‫E como toda essa função de middleware aqui
‫faz é basicamente adicionar alguns cabeçalhos específicos, talvez você esteja
‫pensando "Por que estamos usando" mais
‫um pacote NPM? "Bem, vamos
‫realmente dar uma olhada no
‫código deste pacote.
‫Então GitHub CORS, então mais uma vez,
‫é geralmente como eu encontro a documentação ou
‫o próprio código-fonte para meus pacotes.
‫E então vamos entrar aqui em lib,
‫que geralmente significa biblioteca.
‫E então tudo o que realmente temos aqui é este índice. js.
‫E então você vê que aqui está todo o código, e
‫basicamente o que
‫você vê aqui é que ele simplesmente adiciona esse
‫cabeçalho aqui com o valor de basicamente tudo aos cabeçalhos.
‫Tudo bem, então você tem alguns outros
‫cabeçalhos, Access-Control-Allow-Methods, allow-credentials, e isso é
‫para casos diferentes.
‫Tudo bem, mas você vê
‫que tudo se resume a cabeçalhos aqui.
‫Então, sim, talvez pudéssemos adicionar esses cabeçalhos sozinhos, mas
‫por que faríamos isso?
‫Quer dizer, poderíamos, é
‫claro, para entender completamente como realmente funciona, mas
‫em Node. js e
‫desenvolvimento Express, no ambiente real você
‫geralmente não vai querer reinventar a roda
‫e, em vez disso, sempre
‫que puder, use pacotes que outros desenvolvedores escreveram para nós.
‫Portanto, realmente nos concentramos em fazer nosso aplicativo funcionar,
‫em vez de reescrever o código
‫que outros desenvolvedores já escreveram para nós, certo?
‫Podemos dar uma olhada
‫em tudo isso, mas como mencionei, também podemos ir
‫em frente e realmente usar isso, certo?
‫De qualquer forma, é assim que habilitamos o compartilhamento de recursos de origem cruzada para
‫todas as solicitações de entrada.
‫Então, basicamente, para toda a nossa API.
‫Mas digamos que só quiséssemos habilitar o CORS
‫em uma rota específica.
‫Podemos usar isso também, vamos apenas copiar.
‫E se quiséssemos apenas habilitar o CORS, digamos que
‫nos tours, poderíamos simplesmente
‫adicionar isso aqui a esta pilha de middleware.
‫Tudo bem, mas, novamente, neste caso, queremos permitir
‫isso em todos os lugares.
‫Como vimos anteriormente no código do
‫GitHub, o
‫que isso faz é definir o cabeçalho Access-Control-Allow-Origin para tudo.
‫E então o que tudo isso
‫aqui significa é para todos os pedidos, não importa de onde eles venham.
‫E isso é ideal para permitir que
‫todos consumam nossa API.
‫Mas agora imagine o
‫caso em que não queremos compartilhar nossa
‫API, mas queremos ser capazes de ter a API em
‫um domínio, ou mesmo um subdomínio, e
‫então ter nosso aplicativo front-end em um domínio diferente.
‫Por exemplo, digamos que, como mencionei antes, tínhamos nossa
‫API na API. natours. com, mas então
‫nosso aplicativo de front-end na natours. com.
‫E então, nesse caso, tudo o
‫que queremos fazer é permitir o acesso a partir dessa origem aqui, basicamente.
‫E então, nesse caso, usaríamos o app. use e, em seguida, CORS
‫e, em seguida, passe um objeto para as opções onde
‫especificaríamos a origem, digamos
‫HTTPS: // www. natours. com.
‫E então este é apenas
‫um exemplo caso tivéssemos nosso front-end na hora. com, tudo bem?
‫E então, novamente, com isso nós permitiríamos
‫apenas essa URL basicamente, essa origem, para
‫criar solicitações à API. natours. com.
‫E é claro que também podemos permitir outras origens.
‫Por exemplo, apenas para alguns
‫sites específicos que queremos permitir, ok?
‫Mas, novamente, neste caso, realmente queremos permitir a todos.
‫Ok, então esta foi a primeira parte da ativação do
‫CORS, mas na verdade não é
‫tudo, porque agora isso só
‫funcionará para as chamadas solicitações simples.
‫E as solicitações simples são obter e postar solicitações.
‫Por outro lado, temos os chamados pedidos não simples.
‫E essas são solicitações de colocação, correção e exclusão,
‫ou também solicitações que enviam cookies ou
‫usam cabeçalhos fora do padrão.
‫E essas solicitações não
‫simples exigem a chamada fase de comprovação.
‫Portanto, sempre que houver uma solicitação não
‫simples, o navegador emitirá automaticamente
‫a fase de comprovação e é assim que funciona.
‫Portanto, antes que a solicitação real realmente
‫aconteça, digamos, uma solicitação de exclusão,
‫o navegador primeiro faz uma solicitação de opções
‫para descobrir se a solicitação real é
‫segura para enviar.
‫E isso significa para nós, desenvolvedores,
‫que, em nosso servidor, precisamos realmente responder a
‫essa solicitação de opções.
‫E options é realmente apenas outro método
‫HTTP, então apenas como get, post ou delete, certo?
‫Então, basicamente, quando recebemos uma dessas solicitações de
‫opções em nosso servidor, precisamos
‫enviar de volta o mesmo cabeçalho Access-Control-Allow-Origin.
‫E desta forma o navegador saberá
‫que a solicitação
‫real, e neste caso a solicitação de exclusão, é
‫segura para executar, e então executa a própria solicitação de exclusão, certo?
‫Então, vamos fazer isso e dizer app. opções.
‫Ok, e novamente, isso é muito semelhante a fazer
‫um aplicativo. obtenha, por exemplo, ou. publicar, . excluir,. patch, e
‫todos esses verbos que você já conhece.
‫Assim . options não é definir nenhuma opção
‫em nosso aplicativo, é apenas outro método HTTP ao qual podemos responder.
‫E, novamente, neste caso, precisamos responder a ela porque
‫o navegador envia uma solicitação de
‫opção quando há uma fase de comprovação.
‫Portanto, precisamos definir a
‫rota para a qual queremos lidar com as opções.
‫E mais uma vez, faremos isso em todas as rotas, ok?
‫E então basicamente o
‫manipulador, que mais uma vez é o middleware CORS, certo?
‫E, mais uma vez, poderíamos, é claro,
‫apenas permitir essas solicitações complexas em apenas uma rota específica.
‫Por exemplo, app. opções, e
‫digamos apenas em api / v1 /
‫tours /: id, assim, ok?
‫Então, digamos que alguém faça uma solicitação de exclusão ou patch
‫para um dos tours, e somente aí
‫permitamos uma fase de comprovação.
‫E então, basicamente, apenas nesta
‫rota aqui, uma dessas solicitações complexas pode ser feita.
‫Então, neste caso aqui, onde tínhamos apenas essa rota de opções, apenas
‫os passeios poderiam ser excluídos ou
‫corrigidos de uma solicitação de origem cruzada, certo?
‫E nenhum de nossos outros recursos, certo?
‫Mas, mais uma vez, vamos permitir todos eles, ok?
‫Mas ainda vou deixar isso aqui para você como um exemplo.
‫Ok, de qualquer maneira, isso é tudo o que realmente precisamos
‫fazer para habilitar o CORS para nosso aplicativo.
‫E agora vamos reimplantar o aplicativo
‫empurrando-o novamente para o Heroku.
‫Mas antes de fazermos isso, eu realmente quero mudar algo aqui
‫em nosso pacote. json.
‫E esse é o mecanismo de nó aqui.
‫Portanto, às vezes pode criar
‫alguns problemas quando especificamos a versão como esta.
‫Basicamente, permitindo a instalação de versões
‫superiores à versão que
‫estamos executando atualmente.
‫E então o que eu
‫quero fazer aqui é dizer que ele deve instalar apenas a versão
‫10, e não uma versão posterior.
‫Então, eu faço isso dizendo este símbolo circunflexo aqui e, em seguida,
‫a versão 10.
‫E então, mais uma vez, isso está usando o controle de versão
‫semântico, e assim como aqui.
‫O que, lembre-se, significa que o NPM
‫tem permissão para instalar qualquer uma dessas subversões ou versões
‫de patch, mas não pula para a próxima versão principal.
‫E aqui o que estou fazendo é o mesmo, ok?
‫Portanto, estou executando o Node versão 10 algo e,
‫portanto, você pode confirmar o seu digitando node -v, e você verá que
‫estou no 10. 11 agora.
‫Mas provavelmente quando você estiver assistindo
‫este curso, você estará pelo menos na versão 12, talvez até 14 ou 16,
‫dependendo de quanto tempo no futuro você está, certo?
‫E não se preocupe, é
‫claro, tudo o que eu mostro aqui no curso
‫ainda deve estar funcionando
‫bem para qualquer versão do Node que você esteja usando.
‫Então, se você está usando
‫a versão 12, vá em frente e coloque a 12 bem aqui, certo?
‫De qualquer forma, vamos agora adicionar todos os
‫arquivos modificados à área de teste, então git add all.
‫E, em seguida, envie-os com uma mensagem significativa, então
‫implemente o CORS.
‫E então pegue o mestre Heroku.
‫E agora isso leva
‫algum tempo, então vejo você quando terminar.
‫Portanto, o aplicativo foi implantado com sucesso agora, vamos
‫recarregar rapidamente aqui para ver
‫se ainda está funcionando, e de fato está.
‫E agora, para provar que funciona de maneira diferente com o CORS,
‫se fizermos essa
‫solicitação aqui novamente, ele deve funcionar, certo?
‫Então, vamos tentar isso e vamos lá.
‫Sem erros desta vez, vamos verificar x aqui.
‫E, de fato, parece que há algo aqui.
‫Então, você vê que na verdade a resposta é
‫do tipo CORS, temos nossos cabeçalhos, bem, não posso realmente vê-los aqui.
‫Isso não importa, aqui também
‫temos uma string legível,
‫mas, novamente, isso não é importante.
‫O que importa aqui é
‫que agora podemos realizar solicitações de origem cruzada, o que é fantástico.
‫Agora, deixe-me mostrar também os cabeçalhos reais
‫que o pacote
‫CORS adiciona apenas fazendo alguma solicitação aqui no Postman.
‫Então, na produção, vamos enviá-lo.
‫E aqui você vê
‫nos cabeçalhos de resposta que realmente
‫temos este Access-Control-Allow-Origin configurado para tudo, ok, ótimo.
‫E é assim que você realmente implementa o compartilhamento de
‫recursos de origem cruzada em seu próprio aplicativo.