[MÚSICA]
Tendo entendido alguns detalhes sobre cors na palestra anterior,
neste exercício vamos usar o módulo cors Node e configurar nosso servidor express.
Para permitir que o servidor responda com os cors
apropriados cabeçalhos relacionados à solicitação vinda do site do cliente.
Para começar como você esperaria, vamos primeiro instalar o módulo de nó cors.
Então, no prompt, digite npm install.
Certifique-se de que você está na pasta do servidor Confusion e, em seguida, cors — salvar.
E então instale o módulo cors.
E como você pode ver, neste curso eu estou usando cors @2 .8.4.
Depois de ter instalado o módulo cors,
vamos para o nosso editor e, em seguida, configurar o nosso servidor express.
Indo para o nosso editor.
Agora na pasta rotas, agora que é onde eu estaria aplicando principalmente
o módulo cors porque é onde todas as várias rotas estão sendo atendidas.
Então, na pasta rotas, vou adicionar um novo arquivo chamado cors.js.
E, em seguida, neste arquivo, vamos configurar o módulo cors.
Agora esta é a minha maneira de colocar todas as informações relacionadas a
cors em um módulo de nó baseado em arquivo separado aqui.
Então, no prompt,
deixe-me tentar const express =
require ('express').
E vamos lá,
o módulo Cors entra.
Const app = express (); e
, em seguida, vamos dizer uma lista branca de uma matriz de strings.
A lista branca contém todas as origens
que este servidor está disposto a aceitar.
Agora vou incluir alguns deles aqui,
localhost: 3000 e,
em seguida, host local 3443.
E se você precisar de mais origens para ser adicionado à sua lista branca, você pode simplesmente adicioná-los
à sua lista branca porque eu estou explicitamente tentando configurar meu módulo cors.
Então aqui, vou declarar
uma função A aqui,
com o pedido e chamada de volta sendo definido aqui.
E dentro disso eu vou descobrir que cors opções aqui.
Então eu vou começar dizendo corsoOptions,
var CorsoOptions; e então eu vou
dizer se (whitelist.indexOf (req.header ('Origin'-
))).
Então você pode ver que aqui estamos especificando no código aqui,
estamos dizendo req.header.
Então, se o cabeçalho de solicitação de entrada contém um feed de origem,
então vamos verificar esta lista branca.
Procurando por essa origem em particular, está presente nesta lista branca?
Então é por isso que estamos dizendo whitelist.indexOf.
Então esta é uma operação de array sendo feita aqui.
E diremos que na origem não é igual a -1.
Como você sabe o índice de operação irá retornar o índice maior ou
igual a zero se este estiver presente nesta matriz.
Ele retornará -1 se isso não estiver presente nesta matriz.
Então, uma maneira muito rápida de verificar se as
solicitações recebidas são originadas na lista branca.
Nesse caso, diremos
CorsOptions, CorsOptions.
CorsOptions = e aqui é onde eu
especificarei {origin: true}
Então, dizendo {origin: true}, o que significa que
a origem original na solicitação de entrada está na lista branca.
Por isso, vou permitir que seja aceite.
Então, quando eu definir origem é igual a verdadeiro aqui, em seguida, meu módulo cors
responderá dizendo controle de acesso permitir origem, e, em seguida, incluir essa origem nos
cabeçalhos com o controle de acesso permitir chave origem lá.
Assim, meu cliente será informado dizendo que está tudo bem para
o servidor aceitar este pedido para esta origem em particular.
Caso contrário, então, se esse não for o caso, então
se o req.header ('Origin') não estiver
na lista branca, então você verá CorsOptions.
{ origem: false}.
Então, quando você definir origem como false, o controlador de acesso
AlloWorigin não será retornado pelo site do meu servidor.
E então uma vez que tenhamos feito isso,
então vamos dizer callback (null, CorsOptions);.
É isso. Então, chamando esta função aqui,
CorsoptionsDelegate aqui, vamos verificar se a
solicitação de entrada pertence a uma das origens da lista branca.
Se for, então você responder de volta com controle de acesso
AlloWorigin com a origem da solicitação definida lá.
Caso contrário, não incluirá esse controle de acesso AlloWorigin quando ele responder.
Agora, a partir desta função, vamos exportar cors como cors aqui.
Agora, se você configurar o módulo cors simplesmente dizendo cors
sem quaisquer opções, então isso significa que isso irá responder de
volta com controle de acesso AlloWorigin com o pedágio curinga.
Existem certas regras sobre as quais isso é aceitável para fazer,
especialmente sempre que realizamos operações get.
Tudo bem aceitar isso.
Caso contrário, vamos dizer, CorsWithOptions = cors, e
então vamos fornecer a) CorsOptionsDelegate)
função que acabamos de definir anteriormente.
Dessa forma, se você precisar aplicar A cors
com opções específicas para uma rota específica, usaremos essa função.
Caso contrário, usaremos os cors padrão.
Agora que definimos o código relacionado a cors em cors.js,
vamos começar a aplicar isso para as várias rotas.
Então vamos começar com o DisishRouter.
Então vamos abrir o DishRouter, e
no DisishRouter, vamos primeiro
[NOIED] importar [NOID]. /cors.
Observe que o arquivo cors.js está na mesma pasta, então
podemos apenas importar isso dizendo. /cors.js.
Módulo de nó baseado em arquivo.
Agora, para a solicitação GET, uma vez que tenhamos importado isso.
Agora, para o DisHRouter, vou configurar o campo de opções.
Então, como você viu, sempre que você precisa comprovar suas solicitações,
o cliente irá primeiro enviar a mensagem de solicitação HTTP OPTIONS e, em seguida, obter
a resposta do lado do servidor antes de realmente enviar a solicitação real.
Então, para opções, se a mensagem de opções é recebida nesta rota particular,
então vamos responder como cors.corsWithOptions, e,
Com a função de retorno de chamada aqui, que diz,
Res.sendStatus, 200.
Não precisamos enviar nada além do status daqui.
E assim, quando uma mensagem de opções é recebida,
quando isso vai responder, vamos ver quais resultados quando enviamos uma solicitação
de opção do lado do cliente para o lado do servidor em um vôo curto.
Agora, essas opções, eu vou aplicar a todas as rotas.
Então, para o DISHID, para
o dishid/comentários, e também para
o dishid/comentários começar, /:commentid.
Então, todos os casos, eu vou aplicar as mesmas opções lá.
Agora, voltando para cima, para
o GET, vou simplesmente aplicar cors.
Então, para o pedido GET, eu vou dizer, cors.cors,
então note que este é o primeiro middleware que vamos aplicar, e
depois disso ele vai passar para esta mensagem aqui.
Assim, o middleware cors é introduzido lá.
Para o POST, eles aplicarão cors.corsWithOptions.
A mesma coisa para isso, PUT,
DELETE. A
mesma coisa para o restante POST, PUT e
DELETE em todas as outras rotas aqui.
Para o GET, vamos apenas usar os cors,
então deixe-me apenas aplicar os corsWithOptions para POST
, PUT e DELETE em todas as rotas aqui,
então POST, PUT e DELETE.
Agora, para a operação GET como vimos para
a versão do DisishRouter eu apenas apliquei cors.cors,
então eu vou copiar isso e, em seguida, aplicá-lo a todos os GETs.
Então, para este GET, em seguida, rolando para baixo para este GET, e,
em seguida, também para o último, também vou aplicar a mesma opção.
Então, meu DisishRouter agora está atualizado.
Agora, eu vou fazer a mesma coisa com o PromOrouter,
o LeaderRouter, o UploadRouter e também o users.js.
Então, vamos abrir o LeaderRouter em seguida.
No LeaderRouter, a primeira coisa, é claro, é
incluir o módulo de nó baseado em arquivo cors, então
deixe-me copiar isso e, em seguida, colá-lo no LeaderRouter.
Em seguida, as opções, Eu vou aplicar a mesma coisa para o LeaderRouter também.
Então, para o LeaderRouter, aplicarei o CorsWithOptions
e, em seguida, a mesma coisa com o LeaderRouter ou LeaderID.
Você tem apenas duas rotas aqui, então eu vou aplicar as opções para ambos.
Para as operações GET,
preciso aplicar os cors.cors, então copiando isso do DisishRouter.
Este GET, Eu vou aplicar a mesma coisa, e
então também este GET, Eu vou aplicar a mesma coisa.
Agora, para o POST, PUT e DELETE, como você viu, vamos aplicar cors.corsWithOptions,
Para o POST,
depois PUT e DELETE.
E a mesma coisa para o POST, PUT, e
DELETE do LeaderID também.
Então, agora o meu LeaderRouter está atualizado, vamos para PromOrouter.
E no PromOrouter também, vamos começar na parte inferior aqui para
o DELETE, CORSWithOptions, PUT, POST.
Então para este DELETE, PUT, POST.
E para o GET, é claro,
os cors.cors seguem este GET e o outro GET abaixo aqui.
E então, vamos importar esses cors,
então copiando isso do meu LeaderRouter.
Então importamos cors aqui, e depois as opções.
Então, eu vou copiar as opções a partir daqui e
, em seguida, entrar no PromOrouter, eu vou aplicar as opções aqui.
E também para o outro PromOrouter, as mesmas opções.
Agora, UploadRouter.
Então vá para o UploadRouter, novamente,
importar, Cors,
Então, depois disso, para o UploadRouter.Router,
deixe-me aplicar as opções lá.
E para o GET,
vamos dizer cors.cors.
O POST seria cors.corsWithOptions. O
mesmo para o, PUT.
E exclua, para que meu roteador de upload seja atualizado.
O último são os usuários.
Então, nos usuários, deixe-me,
Importar carros,
E, neste caso, porque estamos fazendo router.get, router.post, e assim por diante.
Então, para cada um deles, eu vou entrar e aplicar explicitamente,
cars.carsWithOptions, mesmo para o GET aqui.
Como o GET é executado pelo administrador aqui,
nenhum outro usuário pode ter permissão para executar isso.
Mas a inscrição, também CarsWithOptions para
o login também vou aplicar, É isso.
Vamos salvar todas as alterações para
que tenhamos atualizações todas as várias rotas para usar carros.
Vamos agora começar e ligar nosso servidor e depois ver como esses carros nos ajudam.
Indo para o terminal,
deixe-me iniciar o servidor aqui.
E quando o servidor é iniciado,
vamos para o nosso Postman e, em seguida, enviar um pedido GET.
Então, quando você envia um pedido GET para um localhost: 3000dish,
você receberá imediatamente uma resposta do lado do servidor.
Claro que agora meu banco de dados está vazio então eu tenho um array vazio aqui, mas
vamos olhar em particular para os cabeçalhos porque é aí que
o ponto de interesse para nós está neste exercício.
Então aqui, você pode ver que temos um cabeçalho adicional
aqui chamado Access-Control-Allow-Origin.
Então o Access-Control-Allow-Origin como você vê fornece o carro selvagem,
que é a estrela aqui.
Então, o que significa que, qualquer origem para acessar este recurso em particular,
então o servidor diz que ok, qualquer origem terá permissão para acessar este recurso.
Para o pedido GET estamos satisfeitos com isso.
Vamos agora entrar no sistema, e
então uma vez que obtivermos o token, deixe-me copiar o token aqui.
E então vamos executar uma operação de exclusão em nosso site do servidor.
Então vamos excluir os pratos aqui, então
deixe-me incluir o, Token no cabeçalho de autorização aqui.
E também observe que, para a operação de exclusão, estou definindo a origem.
Então, outro campo aqui chamado origem para httpslocalhost: 3343 aqui.
Então, indicando que esta operação de exclusão está realmente
tentando excluir nesta origem particular aqui.
E assim, quando realizamos esta operação assim, se você estiver fazendo isso a partir de um navegador,
a origem será automaticamente definida pelo navegador com
base na página web a partir da qual a solicitação é originada.
Mas aqui, já que estamos usando o Carteiro, eu tenho que definir explicitamente a origem aqui.
Então deixe-me enviar o pedido com este campo de origem definido aqui.
E então você notaria que o campo de cabeçalho agora contém
Access-Control-Allow-Origin com o localhost: 3443 especificado aqui.
E como você vai notar que esta origem está na lista branca.
Então é por isso que este Access-Control-Allow-Origin está definido para
a mesma origem que nós especificamos lá.
Se você especificar uma origem diferente, por exemplo,
se você especificar, Digamos localhost: 2000, por exemplo.
Você notará que isso não terá, na resposta vinda do servidor,
isso não terá o Access-Control-Allow-Origin definido aqui.
Porque, este endereço específico não está na lista branca no site do servidor.
Vejamos agora um exemplo de preflighting um pedido.
Então, para fazer isso, no Carteiro, selecione Opções aqui
e, em seguida, vamos enviar uma solicitação preflighting
para localhost: 3443dish.
E no cabeçalho vamos, Coloque
a origem como https:localhost3443.
E, em seguida, este enviar este pedido para o servidor.
E em resposta a esta solicitação de opções que você enviou para o servidor,
você notará que na mensagem de resposta diremos 204 Sem Conteúdo.
Não há conteúdo a ser devolvido aqui.
Mas, quando você olha para os cabeçalhos da mensagem de resposta que vem, observe que
temos o Access-Control-Allow-Origin para ser definido para esse valor.
Observe também que ele define os métodos Access-Control-Allow.
E aqui ele especifica os métodos que o servidor estará
disposto a aceitar neste ponto final.
Assim, você está informando o cliente dizendo que,
todos esses métodos são aceitáveis para o servidor no ponto final correspondente.
Então, é assim que podemos fazer preflighting de um pedido.
Enviando a mensagem de solicitação de opções primeiro e,
em seguida, recebendo de volta as informações do servidor aqui.
E, como você se lembra, isso é o que configuramos na
parte de opções de cada um dos pontos finais do roteador.
Então é assim que podemos configurar nosso módulo de nó de carros e
, em seguida, configurar nosso servidor para responder com várias mensagens de cabeçalho.
Com isso, completamos este exercício.
Neste exercício, vimos como podemos configurar nosso servidor para ser capaz de enviar de
volta vários cabeçalhos relacionados ao curso na mensagem de resposta
usando o módulo nó do curso.
Com isso, completamos este exercício.
Este é um bom momento para você fazer um comentário GIT com o curso de mensagem.
[ MUSIC]