1
00:00:01,210 --> 00:00:03,330
‫Jonas: Dalam kuliah ini kita

2
00:00:03,330 --> 00:00:08,020
‫akan menerapkan sesuatu yang disebut CORS, yang berarti berbagi sumber daya lintas-asal.

3
00:00:08,020 --> 00:00:11,670
‫Dan ini adalah fitur mendasar dalam API apa pun, tetapi saya

4
00:00:11,670 --> 00:00:13,400
‫hanya dapat menunjukkannya kepada

5
00:00:13,400 --> 00:00:16,183
‫Anda sekarang karena aplikasi tersebut sebenarnya sudah diterapkan.

6
00:00:17,900 --> 00:00:21,610
‫Sekarang apa sebenarnya berbagi sumber daya lintas asal,

7
00:00:21,610 --> 00:00:24,170
‫dan mengapa kita perlu menerapkannya?

8
00:00:24,170 --> 00:00:26,610
‫Katakanlah kita memiliki API kita

9
00:00:26,610 --> 00:00:31,610
‫di natours-jonas. herokuapp. com/api/v1, dan seterusnya

10
00:00:34,570 --> 00:00:36,180
‫dan seterusnya.

11
00:00:36,180 --> 00:00:40,393
‫Dan kemudian beberapa situs web lain, misalnya di contoh. com, sedang

12
00:00:41,860 --> 00:00:44,380
‫mencoba mengakses API kami.

13
00:00:44,380 --> 00:00:48,470
‫Jadi pada dasarnya mencoba memanggil URL ini di sini.

14
00:00:48,470 --> 00:00:51,730
‫Dan ini kemudian disebut permintaan lintas asal,

15
00:00:51,730 --> 00:00:54,940
‫karena herokuapp. com adalah domain yang berbeda

16
00:00:54,940 --> 00:00:58,550
‫dari contoh. com, dan karena itu jika contoh. com sedang

17
00:00:58,550 --> 00:01:01,570
‫mencoba mengakses herokuapp. com, itu

18
00:01:01,570 --> 00:01:05,520
‫akan menjadi permintaan lintas asal, oke?

19
00:01:05,520 --> 00:01:09,160
‫Sekarang biasanya permintaan lintas-asal tidak diizinkan, dan

20
00:01:09,160 --> 00:01:13,290
‫secara default akan gagal, kecuali kami menerapkan CORS,

21
00:01:13,290 --> 00:01:16,660
‫jadi berbagi sumber daya lintas-asal.

22
00:01:16,660 --> 00:01:20,660
‫Dan karena kami ingin membuat API kami

23
00:01:20,660 --> 00:01:25,240
‫tersedia untuk semua orang, kami pasti perlu mengimplementasikannya, oke?

24
00:01:25,240 --> 00:01:27,933
‫Sekarang izinkan saya menunjukkan kepada Anda bagaimana ini akan gagal.

25
00:01:28,800 --> 00:01:31,073
‫Jadi mari ambil URL ini

26
00:01:31,920 --> 00:01:35,743
‫di sini, dan buka di tab Anda lalu periksa.

27
00:01:36,770 --> 00:01:41,320
‫Jadi pada dasarnya mari kita lakukan permintaan HTTP ke API kita

28
00:01:41,320 --> 00:01:43,540
‫di sini dari konsol, oke?

29
00:01:43,540 --> 00:01:45,840
‫Karena pada dasarnya ketika kita melakukannya dari

30
00:01:45,840 --> 00:01:48,273
‫sini, itu juga akan menjadi permintaan lintas asal.

31
00:01:49,260 --> 00:01:53,440
‫Jadi anggap saja const x sama dengan

32
00:01:53,440 --> 00:01:58,100
‫menunggu, lalu mari kita gunakan fungsi ambil JavaScript, oke?

33
00:01:58,100 --> 00:02:00,050
‫Jadi fetch pada dasarnya

34
00:02:00,050 --> 00:02:02,600
‫adalah fungsi yang sedikit mirip dengan library

35
00:02:02,600 --> 00:02:04,640
‫Axios yang kita gunakan dalam kode

36
00:02:04,640 --> 00:02:07,080
‫kita, tetapi itu adalah JavaScript asli di

37
00:02:07,080 --> 00:02:10,100
‫browser, jadi kita bisa menggunakannya di sini di konsol.

38
00:02:10,100 --> 00:02:12,900
‫Jadi katakanlah kita ingin

39
00:02:12,900 --> 00:02:17,460
‫melakukan permintaan ke API tur kita seperti ini, oke?

40
00:02:17,460 --> 00:02:20,870
‫Jadi jika kita mencoba ini sekarang, mari kita lihat apa yang kita dapatkan.

41
00:02:20,870 --> 00:02:22,480
‫Dan memang kami

42
00:02:22,480 --> 00:02:24,990
‫mendapatkan kesalahan bahwa mencoba mengakses jalur

43
00:02:24,990 --> 00:02:29,900
‫ini di sini dari asal lain ini telah diblokir oleh kebijakan CORS.

44
00:02:29,900 --> 00:02:32,350
‫Dan itulah yang saya katakan sebelumnya.

45
00:02:32,350 --> 00:02:35,320
‫Sehingga secara default, permintaan lintas asal

46
00:02:35,320 --> 00:02:37,250
‫akan selalu diblokir.

47
00:02:37,250 --> 00:02:40,270
‫Omong-omong, ini hanya berlaku untuk permintaan yang

48
00:02:40,270 --> 00:02:41,880
‫dibuat dari browser.

49
00:02:41,880 --> 00:02:44,990
‫Misalnya, menggunakan API fetch di sini, atau sesuatu

50
00:02:44,990 --> 00:02:47,260
‫seperti library Axios yang kami gunakan

51
00:02:47,260 --> 00:02:49,010
‫dalam kode kami.

52
00:02:49,010 --> 00:02:51,210
‫Dan itu berarti dari server,

53
00:02:51,210 --> 00:02:54,500
‫kami akan selalu dapat membuat permintaan lintas-asal

54
00:02:54,500 --> 00:02:55,920
‫tanpa masalah.

55
00:02:55,920 --> 00:02:58,620
‫Jadi tidak ada batasan pada server, tetapi

56
00:02:58,620 --> 00:03:00,500
‫sebenarnya hanya pada

57
00:03:00,500 --> 00:03:03,080
‫browser, untuk alasan keamanan pada dasarnya.

58
00:03:03,080 --> 00:03:06,680
‫Oh, dan juga untuk dianggap lintas-asal, permintaan mungkin

59
00:03:06,680 --> 00:03:09,440
‫datang dari domain yang berbeda.

60
00:03:09,440 --> 00:03:12,020
‫Jadi seperti yang kita lihat dalam contoh

61
00:03:12,020 --> 00:03:15,160
‫pertama kita di sini, tetapi juga subdomain yang berbeda,

62
00:03:15,160 --> 00:03:17,650
‫protokol yang berbeda, atau bahkan port yang

63
00:03:17,650 --> 00:03:19,950
‫berbeda dianggap sebagai permintaan lintas-asal.

64
00:03:19,950 --> 00:03:24,950
‫Jadi misalnya kita punya API. alam. com untuk API kami,

65
00:03:27,100 --> 00:03:31,480
‫dan kemudian akan melakukan permintaan dari natours. com, itu juga

66
00:03:31,480 --> 00:03:34,650
‫akan dianggap sebagai permintaan lintas-asal,

67
00:03:34,650 --> 00:03:37,200
‫dan akan gagal, oke?

68
00:03:37,200 --> 00:03:39,950
‫Tetapi sekali lagi, karena kami ingin mengizinkan situs

69
00:03:39,950 --> 00:03:42,410
‫web lain pada dasarnya mengakses API

70
00:03:42,410 --> 00:03:45,423
‫kami, sekarang mari kita terapkan berbagi sumber daya lintas-asal.

71
00:03:46,680 --> 00:03:49,620
‫Baiklah, jadi kita melakukannya sekali lagi

72
00:03:49,620 --> 00:03:51,653
‫dengan menginstal paket NPM.

73
00:03:53,130 --> 00:03:55,940
‫Jadi instal NPM, dan cukup CORS.

74
00:03:57,770 --> 00:03:59,933
‫Maka di sini kita membutuhkan paket itu.

75
00:04:08,140 --> 00:04:10,450
‫Dan sekali lagi, CORS ini

76
00:04:10,450 --> 00:04:12,480
‫adalah fungsi middleware yang

77
00:04:12,480 --> 00:04:17,480
‫sangat sederhana yang sekarang perlu kita gunakan untuk aplikasi kita, oke?

78
00:04:17,580 --> 00:04:20,250
‫Jadi mari kita lakukan itu di sini, dan mengapa tidak melakukannya

79
00:04:20,250 --> 00:04:21,533
‫di sini di atas?

80
00:04:22,980 --> 00:04:25,930
‫Jadi katakanlah menerapkan CORS.

81
00:04:28,240 --> 00:04:32,380
‫Dan aplikasi. gunakan, dan kemudian panggil CORS,

82
00:04:32,380 --> 00:04:35,270
‫yang pada gilirannya akan mengembalikan fungsi middleware

83
00:04:35,270 --> 00:04:37,860
‫yang kemudian akan menambahkan beberapa header berbeda

84
00:04:37,860 --> 00:04:39,580
‫ke respons kami.

85
00:04:39,580 --> 00:04:41,870
‫Dan karena semua fungsi middleware di

86
00:04:41,870 --> 00:04:44,820
‫sini pada dasarnya adalah menambahkan beberapa header tertentu, mungkin

87
00:04:44,820 --> 00:04:46,767
‫Anda berpikir "Mengapa kami menggunakan "paket

88
00:04:46,767 --> 00:04:49,060
‫NPM lain? “Nah, langsung

89
00:04:49,060 --> 00:04:51,240
‫saja kita lihat kode

90
00:04:51,240 --> 00:04:52,853
‫dari paket ini.

91
00:04:55,370 --> 00:04:58,820
‫Jadi GitHub CORS, jadi sekali lagi, biasanya

92
00:04:58,820 --> 00:05:02,490
‫begitulah cara saya menemukan dokumentasi atau kode sumber

93
00:05:02,490 --> 00:05:05,610
‫itu sendiri untuk paket saya.

94
00:05:05,610 --> 00:05:08,730
‫Jadi mari kita masuk ke lib, yang

95
00:05:08,730 --> 00:05:10,793
‫biasanya berarti perpustakaan.

96
00:05:11,870 --> 00:05:15,960
‫Dan kemudian semua yang kita miliki di sini adalah indeks ini. js.

97
00:05:15,960 --> 00:05:20,020
‫Jadi Anda melihat bahwa di sini adalah semua kodenya, dan pada

98
00:05:20,020 --> 00:05:21,500
‫dasarnya apa yang

99
00:05:21,500 --> 00:05:24,730
‫Anda lihat di sini adalah bahwa ia hanya menambahkan

100
00:05:24,730 --> 00:05:28,653
‫header ini di sini dengan nilai pada dasarnya segalanya ke header.

101
00:05:29,850 --> 00:05:33,740
‫Baiklah, jadi Anda memiliki beberapa header

102
00:05:33,740 --> 00:05:37,320
‫lain, Access-Control-Allow-Methods, allow-credentials, dan itu untuk

103
00:05:37,320 --> 00:05:40,003
‫kasus yang berbeda.

104
00:05:40,900 --> 00:05:42,800
‫Baiklah, tetapi Anda melihat bahwa

105
00:05:42,800 --> 00:05:45,010
‫ini benar-benar hanya tentang header di sini.

106
00:05:45,010 --> 00:05:49,000
‫Jadi ya, mungkin kita bisa menambahkan header ini sendiri,

107
00:05:49,000 --> 00:05:51,430
‫tapi mengapa kita melakukannya?

108
00:05:51,430 --> 00:05:52,810
‫Maksud saya, tentu saja

109
00:05:52,810 --> 00:05:56,260
‫kita bisa, untuk benar-benar memahami cara kerjanya, tetapi

110
00:05:56,260 --> 00:05:58,790
‫di Node.js. js dan

111
00:05:58,790 --> 00:06:01,010
‫pengembangan Express, di lingkungan nyata Anda

112
00:06:01,010 --> 00:06:03,440
‫biasanya tidak ingin menemukan kembali roda, dan

113
00:06:03,440 --> 00:06:05,340
‫sebaliknya, kapan pun Anda bisa,

114
00:06:05,340 --> 00:06:08,810
‫gunakan paket yang telah ditulis pengembang lain untuk kami.

115
00:06:08,810 --> 00:06:12,110
‫Jadi sebenarnya kami hanya fokus membuat aplikasi kami

116
00:06:12,110 --> 00:06:14,740
‫bekerja, daripada menulis ulang kode yang

117
00:06:14,740 --> 00:06:17,750
‫telah ditulis pengembang lain untuk kami, oke?

118
00:06:17,750 --> 00:06:20,070
‫Jadi kita bisa melihat

119
00:06:20,070 --> 00:06:23,930
‫semua ini, tapi seperti yang saya sebutkan, kita juga

120
00:06:23,930 --> 00:06:27,110
‫bisa melanjutkan dan benar-benar menggunakan ini, oke?

121
00:06:27,110 --> 00:06:31,190
‫Bagaimanapun, ini adalah cara kami mengaktifkan berbagi sumber daya lintas-asal untuk

122
00:06:31,190 --> 00:06:32,890
‫semua permintaan yang masuk.

123
00:06:32,890 --> 00:06:35,560
‫Jadi pada dasarnya untuk seluruh API kami.

124
00:06:35,560 --> 00:06:37,950
‫Tapi katakanlah kita hanya ingin mengaktifkan CORS

125
00:06:37,950 --> 00:06:39,490
‫pada rute tertentu.

126
00:06:39,490 --> 00:06:43,253
‫Jadi kita bisa menggunakannya juga, jadi mari kita salin ini.

127
00:06:44,310 --> 00:06:48,250
‫Jadi jika kita hanya ingin mengaktifkan CORS, katakanlah

128
00:06:48,250 --> 00:06:50,360
‫dalam tur, kita bisa

129
00:06:50,360 --> 00:06:53,930
‫menambahkannya di sini ke tumpukan middleware ini.

130
00:06:53,930 --> 00:06:56,930
‫Baiklah, tetapi sekali lagi dalam hal ini kami

131
00:06:56,930 --> 00:06:59,233
‫benar-benar ingin mengizinkannya di mana-mana.

132
00:07:00,210 --> 00:07:03,400
‫Jadi seperti yang kita lihat sebelumnya

133
00:07:03,400 --> 00:07:04,980
‫dalam kode

134
00:07:04,980 --> 00:07:09,980
‫GitHub, yang dilakukan adalah mengatur header Access-Control-Allow-Origin ke semuanya.

135
00:07:14,120 --> 00:07:16,040
‫Jadi apa artinya semua ini

136
00:07:16,040 --> 00:07:19,670
‫di sini adalah untuk semua permintaan dari mana pun mereka berasal.

137
00:07:19,670 --> 00:07:22,350
‫Jadi ini sangat ideal untuk memungkinkan semua

138
00:07:22,350 --> 00:07:24,380
‫orang menggunakan API kami.

139
00:07:24,380 --> 00:07:25,940
‫Tapi sekarang bayangkan kasus

140
00:07:25,940 --> 00:07:28,440
‫di mana kita tidak ingin membagikan API

141
00:07:28,440 --> 00:07:31,590
‫kita, tetapi kita ingin dapat memiliki API di satu

142
00:07:31,590 --> 00:07:33,960
‫domain, atau bahkan satu subdomain, dan kemudian

143
00:07:33,960 --> 00:07:36,760
‫memiliki aplikasi front-end kita di domain yang berbeda.

144
00:07:36,760 --> 00:07:40,580
‫Misalnya, seperti yang saya sebutkan sebelumnya, kami memiliki API

145
00:07:40,580 --> 00:07:45,580
‫kami di API. alam. com, tapi kemudian

146
00:07:46,020 --> 00:07:50,290
‫aplikasi front-end kami di natours. com.

147
00:07:50,290 --> 00:07:52,210
‫Jadi dalam hal ini semua yang

148
00:07:52,210 --> 00:07:56,290
‫kami ingin lakukan adalah mengizinkan akses dari asal ini di sini, pada dasarnya.

149
00:07:56,290 --> 00:08:01,290
‫Jadi dalam hal ini kita akan menggunakan app. gunakan, dan kemudian CORS,

150
00:08:01,700 --> 00:08:06,700
‫dan kemudian berikan objek untuk opsi di mana kami

151
00:08:06,719 --> 00:08:08,720
‫akan menentukan Asal,

152
00:08:11,320 --> 00:08:16,320
‫katakanlah HTTPS://www. alam. com.

153
00:08:19,547 --> 00:08:21,560
‫Jadi ini hanya sebuah contoh

154
00:08:21,560 --> 00:08:26,560
‫jika kami memiliki front-end kami di natours. com, oke?

155
00:08:28,870 --> 00:08:31,510
‫Dan sekali lagi, dengan ini kami hanya akan

156
00:08:31,510 --> 00:08:34,210
‫mengizinkan URL ini pada dasarnya, jadi asal ini, untuk

157
00:08:34,210 --> 00:08:39,142
‫membuat permintaan ke API. alam. com.

158
00:08:39,142 --> 00:08:42,070
‫Dan tentu saja kita juga bisa mengizinkan asal-usul lain.

159
00:08:42,070 --> 00:08:44,400
‫Misalnya, hanya untuk beberapa situs

160
00:08:44,400 --> 00:08:46,770
‫web tertentu yang kami ingin izinkan, oke?

161
00:08:46,770 --> 00:08:50,690
‫Tapi sekali lagi, dalam hal ini kami benar-benar ingin mengizinkan semua orang.

162
00:08:50,690 --> 00:08:54,560
‫Oke, jadi ini adalah bagian pertama dari mengaktifkan CORS, tetapi

163
00:08:54,560 --> 00:08:56,940
‫sebenarnya bukan itu saja, karena saat

164
00:08:56,940 --> 00:08:59,160
‫ini ini hanya akan berfungsi

165
00:08:59,160 --> 00:09:01,410
‫untuk apa yang disebut permintaan sederhana.

166
00:09:01,410 --> 00:09:05,280
‫Dan permintaan sederhana adalah mendapatkan dan memposting permintaan.

167
00:09:05,280 --> 00:09:08,770
‫Di sisi lain, kami memiliki apa yang disebut permintaan tidak sederhana.

168
00:09:08,770 --> 00:09:12,300
‫Dan ini adalah permintaan put, patch, dan delete, atau

169
00:09:12,300 --> 00:09:14,840
‫juga permintaan yang mengirim cookie atau

170
00:09:14,840 --> 00:09:17,210
‫menggunakan header yang tidak standar.

171
00:09:17,210 --> 00:09:19,240
‫Dan permintaan yang tidak

172
00:09:19,240 --> 00:09:22,490
‫sederhana ini, mereka membutuhkan apa yang disebut fase preflight.

173
00:09:22,490 --> 00:09:25,520
‫Jadi setiap kali ada permintaan yang tidak

174
00:09:25,520 --> 00:09:27,910
‫sederhana, browser akan secara

175
00:09:27,910 --> 00:09:31,370
‫otomatis mengeluarkan fase preflight, dan beginilah cara kerjanya.

176
00:09:31,370 --> 00:09:34,240
‫Jadi sebelum permintaan sebenarnya benar-benar terjadi,

177
00:09:34,240 --> 00:09:36,480
‫dan katakanlah permintaan penghapusan,

178
00:09:36,480 --> 00:09:39,640
‫browser terlebih dahulu melakukan permintaan opsi

179
00:09:39,640 --> 00:09:42,400
‫untuk mengetahui apakah permintaan sebenarnya

180
00:09:42,400 --> 00:09:44,150
‫aman untuk dikirim.

181
00:09:44,150 --> 00:09:46,410
‫Jadi artinya bagi kami para pengembang

182
00:09:46,410 --> 00:09:49,410
‫adalah bahwa di server kami, kami harus benar-benar

183
00:09:49,410 --> 00:09:51,420
‫menanggapi permintaan opsi itu.

184
00:09:51,420 --> 00:09:54,860
‫Dan opsi sebenarnya hanyalah metode HTTP

185
00:09:54,860 --> 00:09:59,110
‫lain, jadi seperti dapatkan, poskan, atau hapus, oke?

186
00:09:59,110 --> 00:10:02,530
‫Jadi pada dasarnya ketika kami mendapatkan salah satu dari permintaan

187
00:10:02,530 --> 00:10:05,080
‫opsi ini di server kami, kami

188
00:10:05,080 --> 00:10:08,120
‫kemudian perlu mengirim kembali header Access-Control-Allow-Origin yang sama.

189
00:10:08,120 --> 00:10:10,430
‫Dan dengan cara ini browser

190
00:10:10,430 --> 00:10:11,930
‫akan mengetahui bahwa

191
00:10:11,930 --> 00:10:15,520
‫permintaan yang sebenarnya, dan dalam hal ini permintaan penghapusan,

192
00:10:15,520 --> 00:10:20,070
‫aman untuk dilakukan, dan kemudian mengeksekusi permintaan penghapusan itu sendiri, oke?

193
00:10:20,070 --> 00:10:24,513
‫Jadi mari kita lakukan itu dan katakan app. pilihan.

194
00:10:26,130 --> 00:10:29,200
‫Oke, dan sekali lagi ini sangat mirip dengan

195
00:10:29,200 --> 00:10:34,200
‫melakukan aplikasi. dapatkan misalnya, atau . Pos, . menghapus, . patch, dan

196
00:10:35,430 --> 00:10:37,850
‫semua kata kerja yang sudah Anda ketahui.

197
00:10:37,850 --> 00:10:42,490
‫Jadi . options bukan untuk menyetel opsi apa pun

198
00:10:42,490 --> 00:10:46,490
‫pada aplikasi kami, ini benar-benar hanya metode HTTP lain yang dapat kami tanggapi.

199
00:10:46,490 --> 00:10:49,670
‫Dan sekali lagi, dalam hal ini kita perlu

200
00:10:49,670 --> 00:10:52,010
‫meresponnya karena browser mengirimkan

201
00:10:52,010 --> 00:10:54,630
‫permintaan opsi ketika ada fase preflight.

202
00:10:54,630 --> 00:10:56,520
‫Jadi kita perlu

203
00:10:56,520 --> 00:10:59,630
‫menentukan rute yang ingin kita tangani opsinya.

204
00:10:59,630 --> 00:11:04,630
‫Dan sekali lagi, kami akan melakukan ini di semua rute, oke?

205
00:11:04,920 --> 00:11:07,270
‫Dan kemudian pada dasarnya

206
00:11:07,270 --> 00:11:11,653
‫handler, yang sekali lagi adalah middleware CORS, oke?

207
00:11:12,610 --> 00:11:15,370
‫Dan sekali lagi, tentu saja kami hanya

208
00:11:15,370 --> 00:11:18,810
‫dapat mengizinkan permintaan kompleks ini hanya pada rute tertentu.

209
00:11:18,810 --> 00:11:22,630
‫Misalnya aplikasi. pilihan,

210
00:11:22,630 --> 00:11:27,630
‫dan katakanlah hanya pada api/v1/tours/:id,

211
00:11:31,110 --> 00:11:34,340
‫seperti ini, oke?

212
00:11:34,340 --> 00:11:37,730
‫Jadi katakanlah seseorang melakukan permintaan penghapusan atau patch untuk

213
00:11:37,730 --> 00:11:39,840
‫salah satu tur, dan hanya di

214
00:11:39,840 --> 00:11:41,890
‫sana kami mengizinkan fase preflight.

215
00:11:41,890 --> 00:11:44,340
‫Jadi pada dasarnya hanya pada rute

216
00:11:44,340 --> 00:11:47,680
‫ini di sini, salah satu permintaan kompleks ini dapat dilakukan.

217
00:11:47,680 --> 00:11:51,840
‫Jadi dalam hal ini di mana kami hanya memiliki rute opsi

218
00:11:51,840 --> 00:11:54,150
‫ini, hanya tur yang dapat dihapus

219
00:11:54,150 --> 00:11:56,820
‫atau ditambal dari permintaan lintas asal, bukan?

220
00:11:56,820 --> 00:11:59,870
‫Dan tidak ada sumber daya kita yang lain, oke?

221
00:11:59,870 --> 00:12:04,000
‫Tapi sekali lagi, biarkan semuanya, oke?

222
00:12:04,000 --> 00:12:07,960
‫Tapi saya masih akan meninggalkan ini di sini untuk Anda sebagai contoh.

223
00:12:07,960 --> 00:12:11,550
‫Oke, bagaimanapun, hanya itu yang harus kita lakukan

224
00:12:11,550 --> 00:12:14,410
‫untuk mengaktifkan CORS untuk aplikasi kita.

225
00:12:14,410 --> 00:12:17,030
‫Jadi sekarang mari kita terapkan ulang aplikasi

226
00:12:17,030 --> 00:12:19,620
‫dengan mendorongnya lagi ke Heroku.

227
00:12:19,620 --> 00:12:23,010
‫Tetapi sebelum kita melakukannya, saya sebenarnya ingin mengubah sesuatu di sini

228
00:12:23,010 --> 00:12:25,520
‫dalam paket kami. json.

229
00:12:25,520 --> 00:12:28,010
‫Dan itu adalah mesin simpul ini di sini.

230
00:12:28,010 --> 00:12:30,380
‫Jadi terkadang bisa menimbulkan masalah

231
00:12:30,380 --> 00:12:33,220
‫saat kita menentukan versi seperti ini.

232
00:12:33,220 --> 00:12:35,770
‫Jadi pada dasarnya mengizinkan versi untuk menginstal yang

233
00:12:35,770 --> 00:12:37,400
‫lebih besar dari versi yang

234
00:12:37,400 --> 00:12:38,930
‫sedang kami jalankan.

235
00:12:38,930 --> 00:12:40,540
‫Jadi yang ingin saya

236
00:12:40,540 --> 00:12:43,700
‫lakukan di sini adalah mengatakan bahwa itu seharusnya hanya menginstal versi

237
00:12:43,700 --> 00:12:45,493
‫10, dan bukan versi setelah itu.

238
00:12:46,560 --> 00:12:50,970
‫Jadi saya melakukannya dengan mengatakan simbol tanda sisipan ini di sini, dan

239
00:12:50,970 --> 00:12:52,470
‫kemudian versi 10.

240
00:12:52,470 --> 00:12:55,990
‫Dan sekali lagi, itu menggunakan versi semantik, dan

241
00:12:55,990 --> 00:12:57,770
‫seperti di sini.

242
00:12:57,770 --> 00:13:00,610
‫Yang perlu diingat, berarti NPM

243
00:13:00,610 --> 00:13:04,390
‫diizinkan untuk menginstal salah satu dari subversi atau versi

244
00:13:04,390 --> 00:13:08,070
‫tambalan ini, tetapi tidak menabrak versi utama berikutnya.

245
00:13:08,070 --> 00:13:10,760
‫Jadi di sini apa yang saya lakukan adalah sama, oke?

246
00:13:10,760 --> 00:13:14,350
‫Jadi saya saat ini menjalankan Node versi 10 sesuatu, dan

247
00:13:14,350 --> 00:13:19,070
‫Anda dapat mengonfirmasi milik Anda dengan mengetikkan node -v, dan Anda melihat bahwa

248
00:13:19,070 --> 00:13:22,060
‫saya menggunakan 10. 11 sekarang.

249
00:13:22,060 --> 00:13:24,270
‫Tapi mungkin saat Anda menonton

250
00:13:24,270 --> 00:13:29,250
‫kursus ini, Anda setidaknya akan berada di versi 12, bahkan mungkin 14 atau

251
00:13:29,250 --> 00:13:32,510
‫16, tergantung berapa lama Anda di masa depan, oke?

252
00:13:32,510 --> 00:13:33,860
‫Dan jangan khawatir tentu saja,

253
00:13:33,860 --> 00:13:36,240
‫semua yang saya tunjukkan di sini dalam kursus ini

254
00:13:36,240 --> 00:13:37,550
‫akan tetap berfungsi dengan

255
00:13:37,550 --> 00:13:40,010
‫baik untuk versi Node apa pun yang Anda gunakan.

256
00:13:40,010 --> 00:13:42,030
‫Jadi jika Anda

257
00:13:42,030 --> 00:13:46,900
‫menggunakan versi 12, silakan dan letakkan 12 di sini, oke?

258
00:13:46,900 --> 00:13:51,170
‫Bagaimanapun, sekarang mari tambahkan semua file

259
00:13:51,170 --> 00:13:56,163
‫yang dimodifikasi ke staging area, jadi git add all.

260
00:13:58,300 --> 00:14:02,053
‫Dan kemudian komit dengan pesan yang bermakna, jadi

261
00:14:03,670 --> 00:14:05,260
‫terapkan CORS.

262
00:14:08,707 --> 00:14:11,120
‫Dan kemudian dapatkan push Heroku master.

263
00:14:14,390 --> 00:14:16,200
‫Dan sekarang itu membutuhkan waktu,

264
00:14:16,200 --> 00:14:18,453
‫jadi saya akan melihat Anda ketika itu selesai.

265
00:14:21,950 --> 00:14:25,640
‫Jadi aplikasinya sudah berhasil di-deploy sekarang, ayo cepat-cepat

266
00:14:25,640 --> 00:14:28,230
‫reload disini hanya untuk

267
00:14:29,100 --> 00:14:32,550
‫melihat apakah masih work, dan memang benar.

268
00:14:32,550 --> 00:14:37,190
‫Dan sekarang untuk membuktikan kepada Anda bahwa itu bekerja secara berbeda dengan CORS, jika

269
00:14:37,190 --> 00:14:38,970
‫kami melakukan permintaan ini

270
00:14:38,970 --> 00:14:41,720
‫di sini lagi, itu akan benar-benar berfungsi, bukan?

271
00:14:41,720 --> 00:14:45,170
‫Jadi mari kita coba itu, dan ini dia.

272
00:14:45,170 --> 00:14:48,233
‫Tidak ada kesalahan kali ini, mari kita periksa x di sini.

273
00:14:49,750 --> 00:14:53,740
‫Dan memang, sepertinya ada sesuatu di sini.

274
00:14:53,740 --> 00:14:57,150
‫Jadi Anda melihat bahwa sebenarnya responsnya adalah tipe CORS,

275
00:14:57,150 --> 00:15:01,053
‫kami memiliki header kami, nah, saya tidak dapat benar-benar melihatnya di sini.

276
00:15:01,920 --> 00:15:04,010
‫Itu tidak masalah, di sini kita juga

277
00:15:04,010 --> 00:15:05,690
‫hanya memiliki string yang dapat

278
00:15:05,690 --> 00:15:08,070
‫dibaca, tetapi sekali lagi itu tidak penting sama sekali.

279
00:15:08,070 --> 00:15:10,450
‫Yang penting di sini

280
00:15:10,450 --> 00:15:15,450
‫adalah sekarang kami dapat melakukan permintaan lintas-asal, jadi itu luar biasa.

281
00:15:15,800 --> 00:15:19,130
‫Sekarang izinkan saya juga menunjukkan kepada Anda tajuk

282
00:15:19,130 --> 00:15:21,260
‫aktual yang ditambahkan oleh paket

283
00:15:21,260 --> 00:15:25,610
‫CORS hanya dengan melakukan beberapa permintaan di sini di Tukang Pos.

284
00:15:25,610 --> 00:15:28,513
‫Jadi dalam produksi, mari kita kirim sekarang.

285
00:15:31,540 --> 00:15:34,240
‫Jadi di sini Anda

286
00:15:34,240 --> 00:15:37,690
‫melihat di header respons bahwa kami sebenarnya

287
00:15:37,690 --> 00:15:41,960
‫memiliki Access-Control-Allow-Origin yang disetel ke semuanya, oke, bagus.

288
00:15:41,960 --> 00:15:45,000
‫Jadi beginilah cara Anda menerapkan berbagi sumber

289
00:15:45,000 --> 00:15:47,993
‫daya lintas-Asal di aplikasi Anda sendiri.