1 00:00:01,210 --> 00:00:03,330 ‫Jonas: In diesem Vortrag 2 00:00:03,330 --> 00:00:08,020 ‫implementieren wir etwas namens CORS, was ursprungsübergreifende gemeinsame Nutzung von Ressourcen bedeutet. 3 00:00:08,020 --> 00:00:11,670 ‫Und dies ist eine grundlegende Funktion in jeder API, aber ich 4 00:00:11,670 --> 00:00:13,400 ‫kann Ihnen dies nur 5 00:00:13,400 --> 00:00:16,183 ‫jetzt zeigen, da die Anwendung tatsächlich bereits bereitgestellt ist. 6 00:00:17,900 --> 00:00:21,610 ‫Was ist nun eigentlich Cross-Origin-Resource-Sharing und warum 7 00:00:21,610 --> 00:00:24,170 ‫müssen wir es implementieren? 8 00:00:24,170 --> 00:00:26,610 ‫Nehmen wir an, wir haben unsere 9 00:00:26,610 --> 00:00:31,610 ‫API hier bei natours-jonas. herokuapp. com/api/v1 usw. 10 00:00:34,570 --> 00:00:36,180 ‫usw. 11 00:00:36,180 --> 00:00:40,393 ‫Und dann eine andere Website, zum Beispiel bei Beispiel. com, versucht, 12 00:00:41,860 --> 00:00:44,380 ‫auf unsere API zuzugreifen. 13 00:00:44,380 --> 00:00:48,470 ‫Versuchen Sie also im Grunde, diese URL hier aufzurufen. 14 00:00:48,470 --> 00:00:51,730 ‫Und das nennt man dann ursprungsübergreifende Anfrage, 15 00:00:51,730 --> 00:00:54,940 ‫denn herokuapp. com ist eine andere Domäne 16 00:00:54,940 --> 00:00:58,550 ‫als example. com, und so daher, wenn Beispiel. com versucht, 17 00:00:58,550 --> 00:01:01,570 ‫auf herokuapp zuzugreifen. com, es 18 00:01:01,570 --> 00:01:05,520 ‫wird eine ursprungsübergreifende Anfrage sein, in Ordnung? 19 00:01:05,520 --> 00:01:09,160 ‫Jetzt sind normalerweise ursprungsübergreifende Anfragen nicht zulässig 20 00:01:09,160 --> 00:01:13,290 ‫und schlagen standardmäßig fehl, es sei denn, wir 21 00:01:13,290 --> 00:01:16,660 ‫implementieren CORS, also ursprungsübergreifende Ressourcenfreigabe. 22 00:01:16,660 --> 00:01:20,660 ‫Und da wir unsere API allen zur 23 00:01:20,660 --> 00:01:25,240 ‫Verfügung stellen wollen, müssen wir das unbedingt implementieren, ja? 24 00:01:25,240 --> 00:01:27,933 ‫Lassen Sie mich Ihnen nun tatsächlich zeigen, wie dies fehlschlagen würde. 25 00:01:28,800 --> 00:01:31,073 ‫Lassen Sie uns diese URL 26 00:01:31,920 --> 00:01:35,743 ‫hier abrufen, in Ihrem Tab öffnen und dann überprüfen. 27 00:01:36,770 --> 00:01:41,320 ‫Lassen Sie uns also im Grunde eine HTTP-Anfrage an unsere API hier von 28 00:01:41,320 --> 00:01:43,540 ‫der Konsole aus senden, okay? 29 00:01:43,540 --> 00:01:45,840 ‫Denn im Grunde wird es, wenn wir es 30 00:01:45,840 --> 00:01:48,273 ‫von hier aus tun, auch eine ursprungsübergreifende Anfrage sein. 31 00:01:49,260 --> 00:01:53,440 ‫Sagen wir also einfach const x gleich 32 00:01:53,440 --> 00:01:58,100 ‫await und verwenden wir dann die JavaScript-Abruffunktion, in Ordnung? 33 00:01:58,100 --> 00:02:00,050 ‫fetch ist also im Grunde 34 00:02:00,050 --> 00:02:02,600 ‫eine Funktion, die der Axios-Bibliothek, die wir in unserem 35 00:02:02,600 --> 00:02:04,640 ‫Code verwendet haben, ein bisschen ähnlich ist, 36 00:02:04,640 --> 00:02:07,080 ‫aber es ist natives JavaScript im Browser, und 37 00:02:07,080 --> 00:02:10,100 ‫wir können es also einfach hier in der Konsole verwenden. 38 00:02:10,100 --> 00:02:12,900 ‫Nehmen wir an, wir möchten 39 00:02:12,900 --> 00:02:17,460 ‫eine Anfrage an unsere Touren-API wie diese stellen, in Ordnung? 40 00:02:17,460 --> 00:02:20,870 ‫Wenn wir das jetzt versuchen, schauen wir mal, was wir bekommen. 41 00:02:20,870 --> 00:02:22,480 ‫Und tatsächlich erhalten 42 00:02:22,480 --> 00:02:24,990 ‫wir den Fehler, dass der Versuch, von 43 00:02:24,990 --> 00:02:29,900 ‫diesem anderen Ursprung aus auf diesen Pfad zuzugreifen, durch die CORS-Richtlinie blockiert wurde. 44 00:02:29,900 --> 00:02:32,350 ‫Und genau das habe ich vorhin gesagt. 45 00:02:32,350 --> 00:02:35,320 ‫Damit wird eine ursprungsübergreifende Anfrage 46 00:02:35,320 --> 00:02:37,250 ‫standardmäßig immer blockiert. 47 00:02:37,250 --> 00:02:40,270 ‫Dies gilt übrigens nur für Anfragen 48 00:02:40,270 --> 00:02:41,880 ‫aus dem Browser. 49 00:02:41,880 --> 00:02:44,990 ‫Zum Beispiel die Verwendung der fetch-API hier oder etwas 50 00:02:44,990 --> 00:02:47,260 ‫wie die Axios-Bibliothek, die wir in 51 00:02:47,260 --> 00:02:49,010 ‫unserem Code verwendet haben. 52 00:02:49,010 --> 00:02:51,210 ‫Das bedeutet, dass wir 53 00:02:51,210 --> 00:02:54,500 ‫vom Server aus immer problemlos Cross-Origin-Anfragen 54 00:02:54,500 --> 00:02:55,920 ‫stellen können. 55 00:02:55,920 --> 00:02:58,620 ‫Es gibt also keine Einschränkungen auf dem 56 00:02:58,620 --> 00:03:00,500 ‫Server, sondern eigentlich nur 57 00:03:00,500 --> 00:03:03,080 ‫auf dem Browser, aus Sicherheitsgründen grundsätzlich. 58 00:03:03,080 --> 00:03:06,680 ‫Oh, und auch um als ursprungsübergreifend angesehen zu werden, kann 59 00:03:06,680 --> 00:03:09,440 ‫eine Anfrage von einer anderen Domäne stammen. 60 00:03:09,440 --> 00:03:12,020 ‫So wie wir in unserem ersten Beispiel 61 00:03:12,020 --> 00:03:15,160 ‫hier gesehen haben, wird aber auch eine andere Subdomain, 62 00:03:15,160 --> 00:03:17,650 ‫ein anderes Protokoll oder sogar ein 63 00:03:17,650 --> 00:03:19,950 ‫anderer Port als Cross-Origin-Request gewertet. 64 00:03:19,950 --> 00:03:24,950 ‫Wenn wir zum Beispiel eine API hätten. Natur. com für unsere API und 65 00:03:27,100 --> 00:03:31,480 ‫würde dann eine Anfrage von natours stellen. com, das 66 00:03:31,480 --> 00:03:34,650 ‫wäre dann auch eine Cross-Origin-Anfrage 67 00:03:34,650 --> 00:03:37,200 ‫und würde fehlschlagen, okay? 68 00:03:37,200 --> 00:03:39,950 ‫Da wir jedoch anderen Websites grundsätzlich den 69 00:03:39,950 --> 00:03:42,410 ‫Zugriff auf unsere API ermöglichen 70 00:03:42,410 --> 00:03:45,423 ‫möchten, implementieren wir nun die ursprungsübergreifende Ressourcenfreigabe. 71 00:03:46,680 --> 00:03:49,620 ‫In Ordnung, und das tun wir noch einmal, 72 00:03:49,620 --> 00:03:51,653 ‫indem wir ein NPM-Paket installieren. 73 00:03:53,130 --> 00:03:55,940 ‫Also NPM installieren und einfach CORS. 74 00:03:57,770 --> 00:03:59,933 ‫Dann brauchen wir hier dieses Paket. 75 00:04:08,140 --> 00:04:10,450 ‫Und noch einmal, dieser CORS 76 00:04:10,450 --> 00:04:12,480 ‫hier ist eine sehr 77 00:04:12,480 --> 00:04:17,480 ‫einfache Middleware-Funktion, die wir jetzt für unsere Anwendung verwenden müssen, in Ordnung? 78 00:04:17,580 --> 00:04:20,250 ‫Also machen wir das hier, und warum nicht 79 00:04:20,250 --> 00:04:21,533 ‫gleich hier oben? 80 00:04:22,980 --> 00:04:25,930 ‫Nehmen wir an, wir implementieren CORS. 81 00:04:28,240 --> 00:04:32,380 ‫Und so App. use, und rufen Sie dann 82 00:04:32,380 --> 00:04:35,270 ‫CORS auf, was wiederum eine Middleware-Funktion zurückgibt, 83 00:04:35,270 --> 00:04:37,860 ‫die dann unserer Antwort ein paar 84 00:04:37,860 --> 00:04:39,580 ‫verschiedene Header hinzufügt. 85 00:04:39,580 --> 00:04:41,870 ‫Und da diese Middleware-Funktion hier im 86 00:04:41,870 --> 00:04:44,820 ‫Grunde darin besteht, einige spezifische Header hinzuzufügen, denken 87 00:04:44,820 --> 00:04:46,767 ‫Sie vielleicht: "Warum verwenden wir" noch 88 00:04:46,767 --> 00:04:49,060 ‫ein NPM-Paket? "Nun, schauen 89 00:04:49,060 --> 00:04:51,240 ‫wir uns einfach mal den 90 00:04:51,240 --> 00:04:52,853 ‫Code dieses Pakets an. 91 00:04:55,370 --> 00:04:58,820 ‫Also GitHub CORS, also noch einmal, so 92 00:04:58,820 --> 00:05:02,490 ‫finde ich normalerweise die Dokumentation oder den 93 00:05:02,490 --> 00:05:05,610 ‫Quellcode selbst für meine Pakete. 94 00:05:05,610 --> 00:05:08,730 ‫Lassen Sie uns hier also zu lib gehen, 95 00:05:08,730 --> 00:05:10,793 ‫was normalerweise Bibliothek bedeutet. 96 00:05:11,870 --> 00:05:15,960 ‫Und dann haben wir hier wirklich nur diesen Index. js. 97 00:05:15,960 --> 00:05:20,020 ‫Sie sehen also, dass hier der gesamte Code ist, und im 98 00:05:20,020 --> 00:05:21,500 ‫Wesentlichen sehen Sie 99 00:05:21,500 --> 00:05:24,730 ‫hier, dass dieser Header hier einfach mit dem 100 00:05:24,730 --> 00:05:28,653 ‫Wert von im Wesentlichen allem zu den Headern hinzugefügt wird. 101 00:05:29,850 --> 00:05:33,740 ‫In Ordnung, dann haben Sie ein paar 102 00:05:33,740 --> 00:05:37,320 ‫andere Header, Access-Control-Allow-Methods, allow-credentials, und das 103 00:05:37,320 --> 00:05:40,003 ‫für verschiedene Fälle. 104 00:05:40,900 --> 00:05:42,800 ‫Alles klar, aber Sie sehen, dass 105 00:05:42,800 --> 00:05:45,010 ‫es hier wirklich nur um Kopfzeilen geht. 106 00:05:45,010 --> 00:05:49,000 ‫Also ja, vielleicht könnten wir diese Header einfach selbst hinzufügen, aber 107 00:05:49,000 --> 00:05:51,430 ‫warum sollten wir das eigentlich tun? 108 00:05:51,430 --> 00:05:52,810 ‫Ich meine, wir könnten 109 00:05:52,810 --> 00:05:56,260 ‫natürlich, um wirklich zu verstehen, wie es funktioniert, aber 110 00:05:56,260 --> 00:05:58,790 ‫in Node. js- und Express-Entwicklung 111 00:05:58,790 --> 00:06:01,010 ‫werden Sie in der realen Umgebung 112 00:06:01,010 --> 00:06:03,440 ‫normalerweise das Rad nicht neu erfinden wollen 113 00:06:03,440 --> 00:06:05,340 ‫und stattdessen, wann immer Sie 114 00:06:05,340 --> 00:06:08,810 ‫können, Pakete verwenden, die andere Entwickler für uns geschrieben haben. 115 00:06:08,810 --> 00:06:12,110 ‫Wir konzentrieren uns also wirklich darauf, dass unsere Anwendung funktioniert, 116 00:06:12,110 --> 00:06:14,740 ‫anstatt Code neu zu schreiben, den 117 00:06:14,740 --> 00:06:17,750 ‫andere Entwickler bereits für uns geschrieben haben, in Ordnung? 118 00:06:17,750 --> 00:06:20,070 ‫Wir können uns 119 00:06:20,070 --> 00:06:23,930 ‫das also alles anschauen, aber wie gesagt, wir 120 00:06:23,930 --> 00:06:27,110 ‫können es auch einfach verwenden, okay? 121 00:06:27,110 --> 00:06:31,190 ‫Auf jeden Fall ermöglichen wir auf diese Weise die ursprungsübergreifende Ressourcenfreigabe 122 00:06:31,190 --> 00:06:32,890 ‫für alle eingehenden Anfragen. 123 00:06:32,890 --> 00:06:35,560 ‫Also im Grunde für unsere gesamte API. 124 00:06:35,560 --> 00:06:37,950 ‫Aber sagen wir, wir wollten CORS nur auf 125 00:06:37,950 --> 00:06:39,490 ‫einer bestimmten Route aktivieren. 126 00:06:39,490 --> 00:06:43,253 ‫Wir könnten das also auch verwenden, also kopieren wir das einfach. 127 00:06:44,310 --> 00:06:48,250 ‫Wenn wir also nur CORS, sagen wir auf den 128 00:06:48,250 --> 00:06:50,360 ‫Touren, aktivieren wollten, könnten 129 00:06:50,360 --> 00:06:53,930 ‫wir das einfach hier in diesen Middleware-Stack einfügen. 130 00:06:53,930 --> 00:06:56,930 ‫Alles klar, aber auch in diesem Fall wollen 131 00:06:56,930 --> 00:06:59,233 ‫wir es wirklich überall zulassen. 132 00:07:00,210 --> 00:07:03,400 ‫Wie wir bereits im GitHub-Code 133 00:07:03,400 --> 00:07:04,980 ‫gesehen 134 00:07:04,980 --> 00:07:09,980 ‫haben, wird der Header Access-Control-Allow-Origin auf alles gesetzt. 135 00:07:14,120 --> 00:07:16,040 ‫Und das alles hier 136 00:07:16,040 --> 00:07:19,670 ‫bedeutet also für alle Anfragen, egal woher sie kommen. 137 00:07:19,670 --> 00:07:22,350 ‫Dies ist also ideal, damit jeder 138 00:07:22,350 --> 00:07:24,380 ‫unsere API nutzen kann. 139 00:07:24,380 --> 00:07:25,940 ‫Stellen Sie sich nun 140 00:07:25,940 --> 00:07:28,440 ‫den Fall vor, in dem wir unsere 141 00:07:28,440 --> 00:07:31,590 ‫API nicht teilen möchten, sondern die API in einer Domäne 142 00:07:31,590 --> 00:07:33,960 ‫oder sogar einer Unterdomäne haben möchten und 143 00:07:33,960 --> 00:07:36,760 ‫dann unsere Front-End-Anwendung in einer anderen Domäne haben. 144 00:07:36,760 --> 00:07:40,580 ‫Nehmen wir zum Beispiel an, wie ich bereits erwähnt habe, hatten wir 145 00:07:40,580 --> 00:07:45,580 ‫unsere API bei API. Natur. com, aber dann 146 00:07:46,020 --> 00:07:50,290 ‫unsere Frontend-App bei natours. com. 147 00:07:50,290 --> 00:07:52,210 ‫In diesem Fall wollen wir 148 00:07:52,210 --> 00:07:56,290 ‫also nur den Zugriff von diesem Ursprung hier im Grunde erlauben. 149 00:07:56,290 --> 00:08:01,290 ‫In diesem Fall würden wir die App verwenden. use und dann CORS, und 150 00:08:01,700 --> 00:08:06,700 ‫übergeben Sie dann ein Objekt für die Optionen, bei denen 151 00:08:06,719 --> 00:08:08,720 ‫wir den Ursprung angeben 152 00:08:11,320 --> 00:08:16,320 ‫würden, beispielsweise HTTPS://www. Natur. com. 153 00:08:19,547 --> 00:08:21,560 ‫Dies ist also nur ein Beispiel für 154 00:08:21,560 --> 00:08:26,560 ‫den Fall, dass wir unser Frontend bei natours hatten. com, in Ordnung? 155 00:08:28,870 --> 00:08:31,510 ‫Und damit würden wir im Grunde nur 156 00:08:31,510 --> 00:08:34,210 ‫dieser URL, also diesem Ursprung, erlauben, Anfragen an 157 00:08:34,210 --> 00:08:39,142 ‫die API zu erstellen. Natur. com. 158 00:08:39,142 --> 00:08:42,070 ‫Und natürlich könnten wir auch andere Ursprünge zulassen. 159 00:08:42,070 --> 00:08:44,400 ‫Zum Beispiel nur für einige 160 00:08:44,400 --> 00:08:46,770 ‫bestimmte Websites, die wir zulassen möchten, okay? 161 00:08:46,770 --> 00:08:50,690 ‫Aber auch in diesem Fall wollen wir wirklich alle zulassen. 162 00:08:50,690 --> 00:08:54,560 ‫Okay, das war der erste Teil der Aktivierung von CORS, 163 00:08:54,560 --> 00:08:56,940 ‫aber das ist noch nicht alles, 164 00:08:56,940 --> 00:08:59,160 ‫denn im Moment funktioniert 165 00:08:59,160 --> 00:09:01,410 ‫dies nur für sogenannte einfache Anfragen. 166 00:09:01,410 --> 00:09:05,280 ‫Und einfache Anfragen sind Get- und Post-Requests. 167 00:09:05,280 --> 00:09:08,770 ‫Auf der anderen Seite haben wir sogenannte nicht-einfache Anfragen. 168 00:09:08,770 --> 00:09:12,300 ‫Und dies sind Put-, Patch- und Delete-Anfragen oder 169 00:09:12,300 --> 00:09:14,840 ‫auch Anfragen, die Cookies senden oder 170 00:09:14,840 --> 00:09:17,210 ‫nicht standardmäßige Header verwenden. 171 00:09:17,210 --> 00:09:19,240 ‫Und diese nicht 172 00:09:19,240 --> 00:09:22,490 ‫einfachen Anfragen erfordern eine sogenannte Preflight-Phase. 173 00:09:22,490 --> 00:09:25,520 ‫Wenn es also eine nicht einfache Anfrage 174 00:09:25,520 --> 00:09:27,910 ‫gibt, gibt der Browser 175 00:09:27,910 --> 00:09:31,370 ‫automatisch die Preflight-Phase aus, und so funktioniert das. 176 00:09:31,370 --> 00:09:34,240 ‫Bevor also die eigentliche Anfrage auftritt, 177 00:09:34,240 --> 00:09:36,480 ‫beispielsweise eine Löschanfrage, führt 178 00:09:36,480 --> 00:09:39,640 ‫der Browser zunächst eine Optionsanfrage aus, um 179 00:09:39,640 --> 00:09:42,400 ‫herauszufinden, ob die eigentliche Anfrage sicher 180 00:09:42,400 --> 00:09:44,150 ‫gesendet werden kann. 181 00:09:44,150 --> 00:09:46,410 ‫Für uns Entwickler bedeutet dies, 182 00:09:46,410 --> 00:09:49,410 ‫dass wir auf unserem Server tatsächlich auf 183 00:09:49,410 --> 00:09:51,420 ‫diese Optionsanfrage antworten müssen. 184 00:09:51,420 --> 00:09:54,860 ‫Und options ist wirklich nur eine weitere 185 00:09:54,860 --> 00:09:59,110 ‫HTTP-Methode, also genau wie get, post oder delete, in Ordnung? 186 00:09:59,110 --> 00:10:02,530 ‫Wenn wir also eine dieser Optionsanfragen auf 187 00:10:02,530 --> 00:10:05,080 ‫unserem Server erhalten, müssen 188 00:10:05,080 --> 00:10:08,120 ‫wir im Grunde denselben Access-Control-Allow-Origin-Header zurücksenden. 189 00:10:08,120 --> 00:10:10,430 ‫Auf diese Weise weiß der Browser 190 00:10:10,430 --> 00:10:11,930 ‫dann, dass die 191 00:10:11,930 --> 00:10:15,520 ‫eigentliche Anfrage, und in diesem Fall die Löschanfrage, sicher 192 00:10:15,520 --> 00:10:20,070 ‫durchgeführt werden kann, und führt dann die Löschanfrage selbst aus, in Ordnung? 193 00:10:20,070 --> 00:10:24,513 ‫Also lass uns das tun und sagen App. Optionen. 194 00:10:26,130 --> 00:10:29,200 ‫Okay, und das ist wieder sehr ähnlich wie bei 195 00:10:29,200 --> 00:10:34,200 ‫der App. erhalten zum Beispiel, oder . Post, . löschen, . patch, und 196 00:10:35,430 --> 00:10:37,850 ‫all diese Verben, die Sie bereits kennen. 197 00:10:37,850 --> 00:10:42,490 ‫So . options ist nicht das Setzen von Optionen 198 00:10:42,490 --> 00:10:46,490 ‫für unsere Anwendung, sondern nur eine weitere HTTP-Methode, auf die wir reagieren können. 199 00:10:46,490 --> 00:10:49,670 ‫Auch in diesem Fall müssen wir darauf 200 00:10:49,670 --> 00:10:52,010 ‫reagieren, da der Browser 201 00:10:52,010 --> 00:10:54,630 ‫in einer Preflight-Phase eine Optionsanfrage sendet. 202 00:10:54,630 --> 00:10:56,520 ‫Wir müssen also die 203 00:10:56,520 --> 00:10:59,630 ‫Route definieren, für die wir die Optionen behandeln möchten. 204 00:10:59,630 --> 00:11:04,630 ‫Und das machen wir wieder auf allen Strecken, okay? 205 00:11:04,920 --> 00:11:07,270 ‫Und dann im Grunde 206 00:11:07,270 --> 00:11:11,653 ‫der Handler, der wiederum die CORS-Middleware ist, in Ordnung? 207 00:11:12,610 --> 00:11:15,370 ‫Und wieder einmal konnten wir diese 208 00:11:15,370 --> 00:11:18,810 ‫komplexen Anfragen natürlich nur auf einer bestimmten Strecke zulassen. 209 00:11:18,810 --> 00:11:22,630 ‫Zum Beispiel App. Optionen, 210 00:11:22,630 --> 00:11:27,630 ‫und sagen wir nur auf 211 00:11:31,110 --> 00:11:34,340 ‫api/v1/tours/:id, so, okay? 212 00:11:34,340 --> 00:11:37,730 ‫Nehmen wir also an, jemand macht einen Lösch- oder Patch-Request 213 00:11:37,730 --> 00:11:39,840 ‫für eine der Touren, und nur 214 00:11:39,840 --> 00:11:41,890 ‫dort erlauben wir eine Preflight-Phase. 215 00:11:41,890 --> 00:11:44,340 ‫Und so kann im Grunde nur 216 00:11:44,340 --> 00:11:47,680 ‫auf dieser Strecke hier eine dieser komplexen Anfragen erledigt werden. 217 00:11:47,680 --> 00:11:51,840 ‫Also in diesem Fall hier, wo wir nur diese Routenoptionen hatten, 218 00:11:51,840 --> 00:11:54,150 ‫konnten nur die Touren aus 219 00:11:54,150 --> 00:11:56,820 ‫einer Cross-Origin-Anfrage gelöscht oder gepatcht werden, oder? 220 00:11:56,820 --> 00:11:59,870 ‫Und keine unserer anderen Ressourcen, in Ordnung? 221 00:11:59,870 --> 00:12:04,000 ‫Aber noch einmal, lassen Sie uns alle zulassen, okay? 222 00:12:04,000 --> 00:12:07,960 ‫Aber ich lasse dies dennoch nur als Beispiel hier für Sie. 223 00:12:07,960 --> 00:12:11,550 ‫Okay, das ist alles, was wir wirklich tun müssen, 224 00:12:11,550 --> 00:12:14,410 ‫um CORS für unsere Anwendung zu aktivieren. 225 00:12:14,410 --> 00:12:17,030 ‫Lassen Sie uns die Anwendung jetzt erneut bereitstellen, 226 00:12:17,030 --> 00:12:19,620 ‫indem Sie sie erneut an Heroku übertragen. 227 00:12:19,620 --> 00:12:23,010 ‫Aber bevor wir das tun, möchte ich hier in unserem Paket 228 00:12:23,010 --> 00:12:25,520 ‫noch etwas ändern. json. 229 00:12:25,520 --> 00:12:28,010 ‫Und das ist diese Node-Engine hier. 230 00:12:28,010 --> 00:12:30,380 ‫Daher kann es manchmal zu 231 00:12:30,380 --> 00:12:33,220 ‫Problemen kommen, wenn wir die Version so angeben. 232 00:12:33,220 --> 00:12:35,770 ‫Also grundsätzlich erlauben, dass Versionen installiert werden, die 233 00:12:35,770 --> 00:12:37,400 ‫größer sind als die Version, 234 00:12:37,400 --> 00:12:38,930 ‫die wir derzeit ausführen. 235 00:12:38,930 --> 00:12:40,540 ‫Ich möchte hier 236 00:12:40,540 --> 00:12:43,700 ‫also sagen, dass nur Version 10 installiert werden 237 00:12:43,700 --> 00:12:45,493 ‫sollte und keine Version danach. 238 00:12:46,560 --> 00:12:50,970 ‫Also mache ich es, indem ich hier dieses Caret-Symbol sage und 239 00:12:50,970 --> 00:12:52,470 ‫dann Version 10. 240 00:12:52,470 --> 00:12:55,990 ‫Und das ist wieder einmal die semantische Versionierung, 241 00:12:55,990 --> 00:12:57,770 ‫und so wie hier. 242 00:12:57,770 --> 00:13:00,610 ‫Denken Sie daran, dass NPM 243 00:13:00,610 --> 00:13:04,390 ‫jede dieser Unterversionen oder Patch-Versionen installieren darf, aber 244 00:13:04,390 --> 00:13:08,070 ‫nicht auf die nächste Hauptversion aufsteigen darf. 245 00:13:08,070 --> 00:13:10,760 ‫Und hier, was ich tue, ist dasselbe, okay? 246 00:13:10,760 --> 00:13:14,350 ‫Ich verwende derzeit also etwas Node-Version 10, und Sie 247 00:13:14,350 --> 00:13:19,070 ‫können Ihre bestätigen, indem Sie node -v eingeben, und Sie sehen, dass ich 248 00:13:19,070 --> 00:13:22,060 ‫auf 10 bin. 11 jetzt. 249 00:13:22,060 --> 00:13:24,270 ‫Aber wahrscheinlich, wenn Sie sich diesen 250 00:13:24,270 --> 00:13:29,250 ‫Kurs ansehen, werden Sie mindestens bei Version 12, vielleicht sogar 14 oder 16 sein, je 251 00:13:29,250 --> 00:13:32,510 ‫nachdem, wie lange Sie in der Zukunft sind, in Ordnung? 252 00:13:32,510 --> 00:13:33,860 ‫Und machen Sie sich natürlich 253 00:13:33,860 --> 00:13:36,240 ‫keine Sorgen, alles, was ich Ihnen hier im Kurs 254 00:13:36,240 --> 00:13:37,550 ‫zeige, sollte für 255 00:13:37,550 --> 00:13:40,010 ‫die von Ihnen verwendete Node-Version immer noch gut funktionieren. 256 00:13:40,010 --> 00:13:42,030 ‫Wenn Sie also Version 257 00:13:42,030 --> 00:13:46,900 ‫12 verwenden, legen Sie die 12 bitte hier ein, okay? 258 00:13:46,900 --> 00:13:51,170 ‫Wie auch immer, fügen wir jetzt alle 259 00:13:51,170 --> 00:13:56,163 ‫geänderten Dateien zum Staging-Bereich hinzu, also git add all. 260 00:13:58,300 --> 00:14:02,053 ‫Und sie dann mit einer aussagekräftigen Nachricht festschreiben, 261 00:14:03,670 --> 00:14:05,260 ‫so implementiert CORS. 262 00:14:08,707 --> 00:14:11,120 ‫Und dann hol dir den Heroku-Meister. 263 00:14:14,390 --> 00:14:16,200 ‫Und das dauert jetzt einige Zeit, 264 00:14:16,200 --> 00:14:18,453 ‫also sehen wir uns, wenn das erledigt ist. 265 00:14:21,950 --> 00:14:25,640 ‫Die Anwendung ist jetzt also erfolgreich bereitgestellt. Laden wir sie 266 00:14:25,640 --> 00:14:28,230 ‫hier kurz neu, um zu sehen, 267 00:14:29,100 --> 00:14:32,550 ‫ob sie noch funktioniert, und das ist sie tatsächlich. 268 00:14:32,550 --> 00:14:37,190 ‫Und nun, um Ihnen zu beweisen, dass es mit CORS anders funktioniert, wenn wir 269 00:14:37,190 --> 00:14:38,970 ‫diese Anfrage hier noch 270 00:14:38,970 --> 00:14:41,720 ‫einmal ausführen, sollte es dann tatsächlich funktionieren, oder? 271 00:14:41,720 --> 00:14:45,170 ‫Versuchen wir es also und los geht's. 272 00:14:45,170 --> 00:14:48,233 ‫Diesmal kein Fehler, lass uns hier x überprüfen. 273 00:14:49,750 --> 00:14:53,740 ‫Und tatsächlich sieht es so aus, als ob hier etwas wäre. 274 00:14:53,740 --> 00:14:57,150 ‫Sie sehen also, dass die Antwort tatsächlich vom Typ CORS 275 00:14:57,150 --> 00:15:01,053 ‫ist, wir haben unsere Header, nun, ich kann sie hier nicht wirklich sehen. 276 00:15:01,920 --> 00:15:04,010 ‫Das macht nichts, hier haben wir auch 277 00:15:04,010 --> 00:15:05,690 ‫nur einen lesbaren String, 278 00:15:05,690 --> 00:15:08,070 ‫aber auch das ist überhaupt nicht wichtig. 279 00:15:08,070 --> 00:15:10,450 ‫Wichtig ist hier, dass 280 00:15:10,450 --> 00:15:15,450 ‫wir jetzt ursprungsübergreifende Anfragen durchführen können, das ist fantastisch. 281 00:15:15,800 --> 00:15:19,130 ‫Lassen Sie mich Ihnen nun auch die tatsächlichen 282 00:15:19,130 --> 00:15:21,260 ‫Header zeigen, die das 283 00:15:21,260 --> 00:15:25,610 ‫CORS-Paket hinzufügt, indem Sie einfach eine Anfrage hier in Postman ausführen. 284 00:15:25,610 --> 00:15:28,513 ‫Lassen Sie es uns jetzt in der Produktion senden. 285 00:15:31,540 --> 00:15:34,240 ‫Und hier sehen Sie 286 00:15:34,240 --> 00:15:37,690 ‫also in den Antwortheadern, dass wir dieses 287 00:15:37,690 --> 00:15:41,960 ‫Access-Control-Allow-Origin tatsächlich auf alles gesetzt haben, okay, toll. 288 00:15:41,960 --> 00:15:45,000 ‫So implementieren Sie also tatsächlich die ursprungsübergreifende 289 00:15:45,000 --> 00:15:47,993 ‫Ressourcenfreigabe in Ihrer eigenen Anwendung.