1 00:00:01,210 --> 00:00:03,330 ‫Jonas: Nesta aula, vamos 2 00:00:03,330 --> 00:00:08,020 ‫implementar algo chamado CORS, que significa compartilhamento de recursos de origem cruzada. 3 00:00:08,020 --> 00:00:11,670 ‫E esse é um recurso fundamental em qualquer API, mas 4 00:00:11,670 --> 00:00:13,400 ‫só posso mostrar isso 5 00:00:13,400 --> 00:00:16,183 ‫agora que o aplicativo já está implantado. 6 00:00:17,900 --> 00:00:21,610 ‫Agora, o que realmente é compartilhamento de recursos de origem 7 00:00:21,610 --> 00:00:24,170 ‫cruzada e por que precisamos implementá-lo? 8 00:00:24,170 --> 00:00:26,610 ‫Bem, digamos que temos nossa API 9 00:00:26,610 --> 00:00:31,610 ‫aqui em natours-jonas. herokuapp. com / api / v1 10 00:00:34,570 --> 00:00:36,180 ‫e assim por diante. 11 00:00:36,180 --> 00:00:40,393 ‫E então algum outro site, por exemplo, por exemplo. com, está 12 00:00:41,860 --> 00:00:44,380 ‫tentando acessar nossa API. 13 00:00:44,380 --> 00:00:48,470 ‫Então, basicamente, tentando chamar esse URL aqui. 14 00:00:48,470 --> 00:00:51,730 ‫E isso é então chamado de solicitação de origem 15 00:00:51,730 --> 00:00:54,940 ‫cruzada, porque herokuapp. com é um domínio diferente 16 00:00:54,940 --> 00:00:58,550 ‫do exemplo. com e, portanto, se exemplo. com está 17 00:00:58,550 --> 00:01:01,570 ‫tentando acessar o herokuapp. com, será 18 00:01:01,570 --> 00:01:05,520 ‫uma solicitação de origem cruzada, certo? 19 00:01:05,520 --> 00:01:09,160 ‫Agora, as solicitações de origem cruzada não são 20 00:01:09,160 --> 00:01:13,290 ‫permitidas e, por padrão, falharão, a menos que implementemos CORS, 21 00:01:13,290 --> 00:01:16,660 ‫portanto, compartilhamento de recursos de origem cruzada. 22 00:01:16,660 --> 00:01:20,660 ‫E já que queremos disponibilizar nossa 23 00:01:20,660 --> 00:01:25,240 ‫API para todos, definitivamente precisamos implementá-la, certo? 24 00:01:25,240 --> 00:01:27,933 ‫Agora, deixe-me realmente mostrar como isso falharia. 25 00:01:28,800 --> 00:01:31,073 ‫Então, vamos pegar essa 26 00:01:31,920 --> 00:01:35,743 ‫URL aqui, abrir na sua guia e inspecionar. 27 00:01:36,770 --> 00:01:41,320 ‫E então, basicamente, vamos fazer uma solicitação HTTP para nossa API aqui 28 00:01:41,320 --> 00:01:43,540 ‫a partir do console, ok? 29 00:01:43,540 --> 00:01:45,840 ‫Porque basicamente quando fizermos isso daqui, 30 00:01:45,840 --> 00:01:48,273 ‫também será uma solicitação de origem cruzada. 31 00:01:49,260 --> 00:01:53,440 ‫Então, digamos que const x é igual a 32 00:01:53,440 --> 00:01:58,100 ‫await e, em seguida, vamos usar a função fetch JavaScript, certo? 33 00:01:58,100 --> 00:02:00,050 ‫Portanto, fetch é basicamente 34 00:02:00,050 --> 00:02:02,600 ‫uma função um pouco semelhante à biblioteca 35 00:02:02,600 --> 00:02:04,640 ‫Axios que usamos em nosso 36 00:02:04,640 --> 00:02:07,080 ‫código, mas é JavaScript nativo no navegador 37 00:02:07,080 --> 00:02:10,100 ‫e, portanto, podemos apenas usá-lo aqui no console. 38 00:02:10,100 --> 00:02:12,900 ‫Então, digamos que queremos fazer 39 00:02:12,900 --> 00:02:17,460 ‫uma solicitação para nossa API de tours assim, certo? 40 00:02:17,460 --> 00:02:20,870 ‫Então, se tentarmos isso agora, vamos ver o que temos. 41 00:02:20,870 --> 00:02:22,480 ‫E de fato 42 00:02:22,480 --> 00:02:24,990 ‫recebemos o erro de que tentar acessar 43 00:02:24,990 --> 00:02:29,900 ‫este caminho aqui a partir dessa outra origem foi bloqueado pela política CORS. 44 00:02:29,900 --> 00:02:32,350 ‫E isso é exatamente o que eu disse antes. 45 00:02:32,350 --> 00:02:35,320 ‫Assim, por padrão, uma solicitação de origem 46 00:02:35,320 --> 00:02:37,250 ‫cruzada sempre será bloqueada. 47 00:02:37,250 --> 00:02:40,270 ‫A propósito, isso só se aplica a solicitações 48 00:02:40,270 --> 00:02:41,880 ‫feitas no navegador. 49 00:02:41,880 --> 00:02:44,990 ‫Por exemplo, usando a API fetch aqui, ou 50 00:02:44,990 --> 00:02:47,260 ‫algo como a biblioteca Axios que 51 00:02:47,260 --> 00:02:49,010 ‫usamos em nosso código. 52 00:02:49,010 --> 00:02:51,210 ‫E isso significa que a partir 53 00:02:51,210 --> 00:02:54,500 ‫do servidor, sempre seremos capazes de fazer solicitações de origem 54 00:02:54,500 --> 00:02:55,920 ‫cruzada sem problemas. 55 00:02:55,920 --> 00:02:58,620 ‫Portanto, não há restrições no servidor, 56 00:02:58,620 --> 00:03:00,500 ‫mas apenas no 57 00:03:00,500 --> 00:03:03,080 ‫navegador, basicamente por motivos de segurança. 58 00:03:03,080 --> 00:03:06,680 ‫Ah, e também para ser considerada origem cruzada, uma solicitação 59 00:03:06,680 --> 00:03:09,440 ‫pode vir de um domínio diferente. 60 00:03:09,440 --> 00:03:12,020 ‫Assim, como vimos em nosso primeiro exemplo 61 00:03:12,020 --> 00:03:15,160 ‫aqui, um subdomínio diferente, um protocolo diferente ou 62 00:03:15,160 --> 00:03:17,650 ‫mesmo uma porta diferente é considerado 63 00:03:17,650 --> 00:03:19,950 ‫uma solicitação de origem cruzada. 64 00:03:19,950 --> 00:03:24,950 ‫Por exemplo, se tivéssemos API. natours. com para nossa API 65 00:03:27,100 --> 00:03:31,480 ‫e, então, faria uma solicitação de natours. com, isso também 66 00:03:31,480 --> 00:03:34,650 ‫seria considerado uma solicitação de origem 67 00:03:34,650 --> 00:03:37,200 ‫cruzada e falharia, certo? 68 00:03:37,200 --> 00:03:39,950 ‫Mas, novamente, uma vez que queremos permitir que 69 00:03:39,950 --> 00:03:42,410 ‫outros sites acessem basicamente nossa API, vamos 70 00:03:42,410 --> 00:03:45,423 ‫agora implementar o compartilhamento de recursos de origem cruzada. 71 00:03:46,680 --> 00:03:49,620 ‫Tudo bem, então fazemos isso mais uma vez 72 00:03:49,620 --> 00:03:51,653 ‫instalando um pacote NPM. 73 00:03:53,130 --> 00:03:55,940 ‫Portanto, instale o NPM e simplesmente o CORS. 74 00:03:57,770 --> 00:03:59,933 ‫Então aqui nós exigimos esse pacote. 75 00:04:08,140 --> 00:04:10,450 ‫E mais uma vez, este CORS 76 00:04:10,450 --> 00:04:12,480 ‫aqui é uma função 77 00:04:12,480 --> 00:04:17,480 ‫de middleware muito simples que agora precisamos usar para nosso aplicativo, certo? 78 00:04:17,580 --> 00:04:20,250 ‫Então, vamos fazer isso aqui, e por que não fazer 79 00:04:20,250 --> 00:04:21,533 ‫bem aqui no topo? 80 00:04:22,980 --> 00:04:25,930 ‫Então, digamos que implemente o CORS. 81 00:04:28,240 --> 00:04:32,380 ‫E então app. use e chame o CORS, 82 00:04:32,380 --> 00:04:35,270 ‫que por sua vez retornará uma função 83 00:04:35,270 --> 00:04:37,860 ‫de middleware que adicionará alguns cabeçalhos diferentes 84 00:04:37,860 --> 00:04:39,580 ‫à nossa resposta. 85 00:04:39,580 --> 00:04:41,870 ‫E como toda essa função de middleware aqui 86 00:04:41,870 --> 00:04:44,820 ‫faz é basicamente adicionar alguns cabeçalhos específicos, talvez você esteja 87 00:04:44,820 --> 00:04:46,767 ‫pensando "Por que estamos usando" mais 88 00:04:46,767 --> 00:04:49,060 ‫um pacote NPM? "Bem, vamos 89 00:04:49,060 --> 00:04:51,240 ‫realmente dar uma olhada no 90 00:04:51,240 --> 00:04:52,853 ‫código deste pacote. 91 00:04:55,370 --> 00:04:58,820 ‫Então GitHub CORS, então mais uma vez, 92 00:04:58,820 --> 00:05:02,490 ‫é geralmente como eu encontro a documentação ou 93 00:05:02,490 --> 00:05:05,610 ‫o próprio código-fonte para meus pacotes. 94 00:05:05,610 --> 00:05:08,730 ‫E então vamos entrar aqui em lib, 95 00:05:08,730 --> 00:05:10,793 ‫que geralmente significa biblioteca. 96 00:05:11,870 --> 00:05:15,960 ‫E então tudo o que realmente temos aqui é este índice. js. 97 00:05:15,960 --> 00:05:20,020 ‫E então você vê que aqui está todo o código, e 98 00:05:20,020 --> 00:05:21,500 ‫basicamente o que 99 00:05:21,500 --> 00:05:24,730 ‫você vê aqui é que ele simplesmente adiciona esse 100 00:05:24,730 --> 00:05:28,653 ‫cabeçalho aqui com o valor de basicamente tudo aos cabeçalhos. 101 00:05:29,850 --> 00:05:33,740 ‫Tudo bem, então você tem alguns outros 102 00:05:33,740 --> 00:05:37,320 ‫cabeçalhos, Access-Control-Allow-Methods, allow-credentials, e isso é 103 00:05:37,320 --> 00:05:40,003 ‫para casos diferentes. 104 00:05:40,900 --> 00:05:42,800 ‫Tudo bem, mas você vê 105 00:05:42,800 --> 00:05:45,010 ‫que tudo se resume a cabeçalhos aqui. 106 00:05:45,010 --> 00:05:49,000 ‫Então, sim, talvez pudéssemos adicionar esses cabeçalhos sozinhos, mas 107 00:05:49,000 --> 00:05:51,430 ‫por que faríamos isso? 108 00:05:51,430 --> 00:05:52,810 ‫Quer dizer, poderíamos, é 109 00:05:52,810 --> 00:05:56,260 ‫claro, para entender completamente como realmente funciona, mas 110 00:05:56,260 --> 00:05:58,790 ‫em Node. js e 111 00:05:58,790 --> 00:06:01,010 ‫desenvolvimento Express, no ambiente real você 112 00:06:01,010 --> 00:06:03,440 ‫geralmente não vai querer reinventar a roda 113 00:06:03,440 --> 00:06:05,340 ‫e, em vez disso, sempre 114 00:06:05,340 --> 00:06:08,810 ‫que puder, use pacotes que outros desenvolvedores escreveram para nós. 115 00:06:08,810 --> 00:06:12,110 ‫Portanto, realmente nos concentramos em fazer nosso aplicativo funcionar, 116 00:06:12,110 --> 00:06:14,740 ‫em vez de reescrever o código 117 00:06:14,740 --> 00:06:17,750 ‫que outros desenvolvedores já escreveram para nós, certo? 118 00:06:17,750 --> 00:06:20,070 ‫Podemos dar uma olhada 119 00:06:20,070 --> 00:06:23,930 ‫em tudo isso, mas como mencionei, também podemos ir 120 00:06:23,930 --> 00:06:27,110 ‫em frente e realmente usar isso, certo? 121 00:06:27,110 --> 00:06:31,190 ‫De qualquer forma, é assim que habilitamos o compartilhamento de recursos de origem cruzada para 122 00:06:31,190 --> 00:06:32,890 ‫todas as solicitações de entrada. 123 00:06:32,890 --> 00:06:35,560 ‫Então, basicamente, para toda a nossa API. 124 00:06:35,560 --> 00:06:37,950 ‫Mas digamos que só quiséssemos habilitar o CORS 125 00:06:37,950 --> 00:06:39,490 ‫em uma rota específica. 126 00:06:39,490 --> 00:06:43,253 ‫Podemos usar isso também, vamos apenas copiar. 127 00:06:44,310 --> 00:06:48,250 ‫E se quiséssemos apenas habilitar o CORS, digamos que 128 00:06:48,250 --> 00:06:50,360 ‫nos tours, poderíamos simplesmente 129 00:06:50,360 --> 00:06:53,930 ‫adicionar isso aqui a esta pilha de middleware. 130 00:06:53,930 --> 00:06:56,930 ‫Tudo bem, mas, novamente, neste caso, queremos permitir 131 00:06:56,930 --> 00:06:59,233 ‫isso em todos os lugares. 132 00:07:00,210 --> 00:07:03,400 ‫Como vimos anteriormente no código do 133 00:07:03,400 --> 00:07:04,980 ‫GitHub, o 134 00:07:04,980 --> 00:07:09,980 ‫que isso faz é definir o cabeçalho Access-Control-Allow-Origin para tudo. 135 00:07:14,120 --> 00:07:16,040 ‫E então o que tudo isso 136 00:07:16,040 --> 00:07:19,670 ‫aqui significa é para todos os pedidos, não importa de onde eles venham. 137 00:07:19,670 --> 00:07:22,350 ‫E isso é ideal para permitir que 138 00:07:22,350 --> 00:07:24,380 ‫todos consumam nossa API. 139 00:07:24,380 --> 00:07:25,940 ‫Mas agora imagine o 140 00:07:25,940 --> 00:07:28,440 ‫caso em que não queremos compartilhar nossa 141 00:07:28,440 --> 00:07:31,590 ‫API, mas queremos ser capazes de ter a API em 142 00:07:31,590 --> 00:07:33,960 ‫um domínio, ou mesmo um subdomínio, e 143 00:07:33,960 --> 00:07:36,760 ‫então ter nosso aplicativo front-end em um domínio diferente. 144 00:07:36,760 --> 00:07:40,580 ‫Por exemplo, digamos que, como mencionei antes, tínhamos nossa 145 00:07:40,580 --> 00:07:45,580 ‫API na API. natours. com, mas então 146 00:07:46,020 --> 00:07:50,290 ‫nosso aplicativo de front-end na natours. com. 147 00:07:50,290 --> 00:07:52,210 ‫E então, nesse caso, tudo o 148 00:07:52,210 --> 00:07:56,290 ‫que queremos fazer é permitir o acesso a partir dessa origem aqui, basicamente. 149 00:07:56,290 --> 00:08:01,290 ‫E então, nesse caso, usaríamos o app. use e, em seguida, CORS 150 00:08:01,700 --> 00:08:06,700 ‫e, em seguida, passe um objeto para as opções onde 151 00:08:06,719 --> 00:08:08,720 ‫especificaríamos a origem, digamos 152 00:08:11,320 --> 00:08:16,320 ‫HTTPS: // www. natours. com. 153 00:08:19,547 --> 00:08:21,560 ‫E então este é apenas 154 00:08:21,560 --> 00:08:26,560 ‫um exemplo caso tivéssemos nosso front-end na hora. com, tudo bem? 155 00:08:28,870 --> 00:08:31,510 ‫E então, novamente, com isso nós permitiríamos 156 00:08:31,510 --> 00:08:34,210 ‫apenas essa URL basicamente, essa origem, para 157 00:08:34,210 --> 00:08:39,142 ‫criar solicitações à API. natours. com. 158 00:08:39,142 --> 00:08:42,070 ‫E é claro que também podemos permitir outras origens. 159 00:08:42,070 --> 00:08:44,400 ‫Por exemplo, apenas para alguns 160 00:08:44,400 --> 00:08:46,770 ‫sites específicos que queremos permitir, ok? 161 00:08:46,770 --> 00:08:50,690 ‫Mas, novamente, neste caso, realmente queremos permitir a todos. 162 00:08:50,690 --> 00:08:54,560 ‫Ok, então esta foi a primeira parte da ativação do 163 00:08:54,560 --> 00:08:56,940 ‫CORS, mas na verdade não é 164 00:08:56,940 --> 00:08:59,160 ‫tudo, porque agora isso só 165 00:08:59,160 --> 00:09:01,410 ‫funcionará para as chamadas solicitações simples. 166 00:09:01,410 --> 00:09:05,280 ‫E as solicitações simples são obter e postar solicitações. 167 00:09:05,280 --> 00:09:08,770 ‫Por outro lado, temos os chamados pedidos não simples. 168 00:09:08,770 --> 00:09:12,300 ‫E essas são solicitações de colocação, correção e exclusão, 169 00:09:12,300 --> 00:09:14,840 ‫ou também solicitações que enviam cookies ou 170 00:09:14,840 --> 00:09:17,210 ‫usam cabeçalhos fora do padrão. 171 00:09:17,210 --> 00:09:19,240 ‫E essas solicitações não 172 00:09:19,240 --> 00:09:22,490 ‫simples exigem a chamada fase de comprovação. 173 00:09:22,490 --> 00:09:25,520 ‫Portanto, sempre que houver uma solicitação não 174 00:09:25,520 --> 00:09:27,910 ‫simples, o navegador emitirá automaticamente 175 00:09:27,910 --> 00:09:31,370 ‫a fase de comprovação e é assim que funciona. 176 00:09:31,370 --> 00:09:34,240 ‫Portanto, antes que a solicitação real realmente 177 00:09:34,240 --> 00:09:36,480 ‫aconteça, digamos, uma solicitação de exclusão, 178 00:09:36,480 --> 00:09:39,640 ‫o navegador primeiro faz uma solicitação de opções 179 00:09:39,640 --> 00:09:42,400 ‫para descobrir se a solicitação real é 180 00:09:42,400 --> 00:09:44,150 ‫segura para enviar. 181 00:09:44,150 --> 00:09:46,410 ‫E isso significa para nós, desenvolvedores, 182 00:09:46,410 --> 00:09:49,410 ‫que, em nosso servidor, precisamos realmente responder a 183 00:09:49,410 --> 00:09:51,420 ‫essa solicitação de opções. 184 00:09:51,420 --> 00:09:54,860 ‫E options é realmente apenas outro método 185 00:09:54,860 --> 00:09:59,110 ‫HTTP, então apenas como get, post ou delete, certo? 186 00:09:59,110 --> 00:10:02,530 ‫Então, basicamente, quando recebemos uma dessas solicitações de 187 00:10:02,530 --> 00:10:05,080 ‫opções em nosso servidor, precisamos 188 00:10:05,080 --> 00:10:08,120 ‫enviar de volta o mesmo cabeçalho Access-Control-Allow-Origin. 189 00:10:08,120 --> 00:10:10,430 ‫E desta forma o navegador saberá 190 00:10:10,430 --> 00:10:11,930 ‫que a solicitação 191 00:10:11,930 --> 00:10:15,520 ‫real, e neste caso a solicitação de exclusão, é 192 00:10:15,520 --> 00:10:20,070 ‫segura para executar, e então executa a própria solicitação de exclusão, certo? 193 00:10:20,070 --> 00:10:24,513 ‫Então, vamos fazer isso e dizer app. opções. 194 00:10:26,130 --> 00:10:29,200 ‫Ok, e novamente, isso é muito semelhante a fazer 195 00:10:29,200 --> 00:10:34,200 ‫um aplicativo. obtenha, por exemplo, ou. publicar, . excluir,. patch, e 196 00:10:35,430 --> 00:10:37,850 ‫todos esses verbos que você já conhece. 197 00:10:37,850 --> 00:10:42,490 ‫Assim . options não é definir nenhuma opção 198 00:10:42,490 --> 00:10:46,490 ‫em nosso aplicativo, é apenas outro método HTTP ao qual podemos responder. 199 00:10:46,490 --> 00:10:49,670 ‫E, novamente, neste caso, precisamos responder a ela porque 200 00:10:49,670 --> 00:10:52,010 ‫o navegador envia uma solicitação de 201 00:10:52,010 --> 00:10:54,630 ‫opção quando há uma fase de comprovação. 202 00:10:54,630 --> 00:10:56,520 ‫Portanto, precisamos definir a 203 00:10:56,520 --> 00:10:59,630 ‫rota para a qual queremos lidar com as opções. 204 00:10:59,630 --> 00:11:04,630 ‫E mais uma vez, faremos isso em todas as rotas, ok? 205 00:11:04,920 --> 00:11:07,270 ‫E então basicamente o 206 00:11:07,270 --> 00:11:11,653 ‫manipulador, que mais uma vez é o middleware CORS, certo? 207 00:11:12,610 --> 00:11:15,370 ‫E, mais uma vez, poderíamos, é claro, 208 00:11:15,370 --> 00:11:18,810 ‫apenas permitir essas solicitações complexas em apenas uma rota específica. 209 00:11:18,810 --> 00:11:22,630 ‫Por exemplo, app. opções, e 210 00:11:22,630 --> 00:11:27,630 ‫digamos apenas em api / v1 / 211 00:11:31,110 --> 00:11:34,340 ‫tours /: id, assim, ok? 212 00:11:34,340 --> 00:11:37,730 ‫Então, digamos que alguém faça uma solicitação de exclusão ou patch 213 00:11:37,730 --> 00:11:39,840 ‫para um dos tours, e somente aí 214 00:11:39,840 --> 00:11:41,890 ‫permitamos uma fase de comprovação. 215 00:11:41,890 --> 00:11:44,340 ‫E então, basicamente, apenas nesta 216 00:11:44,340 --> 00:11:47,680 ‫rota aqui, uma dessas solicitações complexas pode ser feita. 217 00:11:47,680 --> 00:11:51,840 ‫Então, neste caso aqui, onde tínhamos apenas essa rota de opções, apenas 218 00:11:51,840 --> 00:11:54,150 ‫os passeios poderiam ser excluídos ou 219 00:11:54,150 --> 00:11:56,820 ‫corrigidos de uma solicitação de origem cruzada, certo? 220 00:11:56,820 --> 00:11:59,870 ‫E nenhum de nossos outros recursos, certo? 221 00:11:59,870 --> 00:12:04,000 ‫Mas, mais uma vez, vamos permitir todos eles, ok? 222 00:12:04,000 --> 00:12:07,960 ‫Mas ainda vou deixar isso aqui para você como um exemplo. 223 00:12:07,960 --> 00:12:11,550 ‫Ok, de qualquer maneira, isso é tudo o que realmente precisamos 224 00:12:11,550 --> 00:12:14,410 ‫fazer para habilitar o CORS para nosso aplicativo. 225 00:12:14,410 --> 00:12:17,030 ‫E agora vamos reimplantar o aplicativo 226 00:12:17,030 --> 00:12:19,620 ‫empurrando-o novamente para o Heroku. 227 00:12:19,620 --> 00:12:23,010 ‫Mas antes de fazermos isso, eu realmente quero mudar algo aqui 228 00:12:23,010 --> 00:12:25,520 ‫em nosso pacote. json. 229 00:12:25,520 --> 00:12:28,010 ‫E esse é o mecanismo de nó aqui. 230 00:12:28,010 --> 00:12:30,380 ‫Portanto, às vezes pode criar 231 00:12:30,380 --> 00:12:33,220 ‫alguns problemas quando especificamos a versão como esta. 232 00:12:33,220 --> 00:12:35,770 ‫Basicamente, permitindo a instalação de versões 233 00:12:35,770 --> 00:12:37,400 ‫superiores à versão que 234 00:12:37,400 --> 00:12:38,930 ‫estamos executando atualmente. 235 00:12:38,930 --> 00:12:40,540 ‫E então o que eu 236 00:12:40,540 --> 00:12:43,700 ‫quero fazer aqui é dizer que ele deve instalar apenas a versão 237 00:12:43,700 --> 00:12:45,493 ‫10, e não uma versão posterior. 238 00:12:46,560 --> 00:12:50,970 ‫Então, eu faço isso dizendo este símbolo circunflexo aqui e, em seguida, 239 00:12:50,970 --> 00:12:52,470 ‫a versão 10. 240 00:12:52,470 --> 00:12:55,990 ‫E então, mais uma vez, isso está usando o controle de versão 241 00:12:55,990 --> 00:12:57,770 ‫semântico, e assim como aqui. 242 00:12:57,770 --> 00:13:00,610 ‫O que, lembre-se, significa que o NPM 243 00:13:00,610 --> 00:13:04,390 ‫tem permissão para instalar qualquer uma dessas subversões ou versões 244 00:13:04,390 --> 00:13:08,070 ‫de patch, mas não pula para a próxima versão principal. 245 00:13:08,070 --> 00:13:10,760 ‫E aqui o que estou fazendo é o mesmo, ok? 246 00:13:10,760 --> 00:13:14,350 ‫Portanto, estou executando o Node versão 10 algo e, 247 00:13:14,350 --> 00:13:19,070 ‫portanto, você pode confirmar o seu digitando node -v, e você verá que 248 00:13:19,070 --> 00:13:22,060 ‫estou no 10. 11 agora. 249 00:13:22,060 --> 00:13:24,270 ‫Mas provavelmente quando você estiver assistindo 250 00:13:24,270 --> 00:13:29,250 ‫este curso, você estará pelo menos na versão 12, talvez até 14 ou 16, 251 00:13:29,250 --> 00:13:32,510 ‫dependendo de quanto tempo no futuro você está, certo? 252 00:13:32,510 --> 00:13:33,860 ‫E não se preocupe, é 253 00:13:33,860 --> 00:13:36,240 ‫claro, tudo o que eu mostro aqui no curso 254 00:13:36,240 --> 00:13:37,550 ‫ainda deve estar funcionando 255 00:13:37,550 --> 00:13:40,010 ‫bem para qualquer versão do Node que você esteja usando. 256 00:13:40,010 --> 00:13:42,030 ‫Então, se você está usando 257 00:13:42,030 --> 00:13:46,900 ‫a versão 12, vá em frente e coloque a 12 bem aqui, certo? 258 00:13:46,900 --> 00:13:51,170 ‫De qualquer forma, vamos agora adicionar todos os 259 00:13:51,170 --> 00:13:56,163 ‫arquivos modificados à área de teste, então git add all. 260 00:13:58,300 --> 00:14:02,053 ‫E, em seguida, envie-os com uma mensagem significativa, então 261 00:14:03,670 --> 00:14:05,260 ‫implemente o CORS. 262 00:14:08,707 --> 00:14:11,120 ‫E então pegue o mestre Heroku. 263 00:14:14,390 --> 00:14:16,200 ‫E agora isso leva 264 00:14:16,200 --> 00:14:18,453 ‫algum tempo, então vejo você quando terminar. 265 00:14:21,950 --> 00:14:25,640 ‫Portanto, o aplicativo foi implantado com sucesso agora, vamos 266 00:14:25,640 --> 00:14:28,230 ‫recarregar rapidamente aqui para ver 267 00:14:29,100 --> 00:14:32,550 ‫se ainda está funcionando, e de fato está. 268 00:14:32,550 --> 00:14:37,190 ‫E agora, para provar que funciona de maneira diferente com o CORS, 269 00:14:37,190 --> 00:14:38,970 ‫se fizermos essa 270 00:14:38,970 --> 00:14:41,720 ‫solicitação aqui novamente, ele deve funcionar, certo? 271 00:14:41,720 --> 00:14:45,170 ‫Então, vamos tentar isso e vamos lá. 272 00:14:45,170 --> 00:14:48,233 ‫Sem erros desta vez, vamos verificar x aqui. 273 00:14:49,750 --> 00:14:53,740 ‫E, de fato, parece que há algo aqui. 274 00:14:53,740 --> 00:14:57,150 ‫Então, você vê que na verdade a resposta é 275 00:14:57,150 --> 00:15:01,053 ‫do tipo CORS, temos nossos cabeçalhos, bem, não posso realmente vê-los aqui. 276 00:15:01,920 --> 00:15:04,010 ‫Isso não importa, aqui também 277 00:15:04,010 --> 00:15:05,690 ‫temos uma string legível, 278 00:15:05,690 --> 00:15:08,070 ‫mas, novamente, isso não é importante. 279 00:15:08,070 --> 00:15:10,450 ‫O que importa aqui é 280 00:15:10,450 --> 00:15:15,450 ‫que agora podemos realizar solicitações de origem cruzada, o que é fantástico. 281 00:15:15,800 --> 00:15:19,130 ‫Agora, deixe-me mostrar também os cabeçalhos reais 282 00:15:19,130 --> 00:15:21,260 ‫que o pacote 283 00:15:21,260 --> 00:15:25,610 ‫CORS adiciona apenas fazendo alguma solicitação aqui no Postman. 284 00:15:25,610 --> 00:15:28,513 ‫Então, na produção, vamos enviá-lo. 285 00:15:31,540 --> 00:15:34,240 ‫E aqui você vê 286 00:15:34,240 --> 00:15:37,690 ‫nos cabeçalhos de resposta que realmente 287 00:15:37,690 --> 00:15:41,960 ‫temos este Access-Control-Allow-Origin configurado para tudo, ok, ótimo. 288 00:15:41,960 --> 00:15:45,000 ‫E é assim que você realmente implementa o compartilhamento de 289 00:15:45,000 --> 00:15:47,993 ‫recursos de origem cruzada em seu próprio aplicativo.