‫Jonas: Dalam kuliah ini kita
‫akan menerapkan sesuatu yang disebut CORS, yang berarti berbagi sumber daya lintas-asal.
‫Dan ini adalah fitur mendasar dalam API apa pun, tetapi saya
‫hanya dapat menunjukkannya kepada
‫Anda sekarang karena aplikasi tersebut sebenarnya sudah diterapkan.
‫Sekarang apa sebenarnya berbagi sumber daya lintas asal,
‫dan mengapa kita perlu menerapkannya?
‫Katakanlah kita memiliki API kita
‫di natours-jonas. herokuapp. com/api/v1, dan seterusnya
‫dan seterusnya.
‫Dan kemudian beberapa situs web lain, misalnya di contoh. com, sedang
‫mencoba mengakses API kami.
‫Jadi pada dasarnya mencoba memanggil URL ini di sini.
‫Dan ini kemudian disebut permintaan lintas asal,
‫karena herokuapp. com adalah domain yang berbeda
‫dari contoh. com, dan karena itu jika contoh. com sedang
‫mencoba mengakses herokuapp. com, itu
‫akan menjadi permintaan lintas asal, oke?
‫Sekarang biasanya permintaan lintas-asal tidak diizinkan, dan
‫secara default akan gagal, kecuali kami menerapkan CORS,
‫jadi berbagi sumber daya lintas-asal.
‫Dan karena kami ingin membuat API kami
‫tersedia untuk semua orang, kami pasti perlu mengimplementasikannya, oke?
‫Sekarang izinkan saya menunjukkan kepada Anda bagaimana ini akan gagal.
‫Jadi mari ambil URL ini
‫di sini, dan buka di tab Anda lalu periksa.
‫Jadi pada dasarnya mari kita lakukan permintaan HTTP ke API kita
‫di sini dari konsol, oke?
‫Karena pada dasarnya ketika kita melakukannya dari
‫sini, itu juga akan menjadi permintaan lintas asal.
‫Jadi anggap saja const x sama dengan
‫menunggu, lalu mari kita gunakan fungsi ambil JavaScript, oke?
‫Jadi fetch pada dasarnya
‫adalah fungsi yang sedikit mirip dengan library
‫Axios yang kita gunakan dalam kode
‫kita, tetapi itu adalah JavaScript asli di
‫browser, jadi kita bisa menggunakannya di sini di konsol.
‫Jadi katakanlah kita ingin
‫melakukan permintaan ke API tur kita seperti ini, oke?
‫Jadi jika kita mencoba ini sekarang, mari kita lihat apa yang kita dapatkan.
‫Dan memang kami
‫mendapatkan kesalahan bahwa mencoba mengakses jalur
‫ini di sini dari asal lain ini telah diblokir oleh kebijakan CORS.
‫Dan itulah yang saya katakan sebelumnya.
‫Sehingga secara default, permintaan lintas asal
‫akan selalu diblokir.
‫Omong-omong, ini hanya berlaku untuk permintaan yang
‫dibuat dari browser.
‫Misalnya, menggunakan API fetch di sini, atau sesuatu
‫seperti library Axios yang kami gunakan
‫dalam kode kami.
‫Dan itu berarti dari server,
‫kami akan selalu dapat membuat permintaan lintas-asal
‫tanpa masalah.
‫Jadi tidak ada batasan pada server, tetapi
‫sebenarnya hanya pada
‫browser, untuk alasan keamanan pada dasarnya.
‫Oh, dan juga untuk dianggap lintas-asal, permintaan mungkin
‫datang dari domain yang berbeda.
‫Jadi seperti yang kita lihat dalam contoh
‫pertama kita di sini, tetapi juga subdomain yang berbeda,
‫protokol yang berbeda, atau bahkan port yang
‫berbeda dianggap sebagai permintaan lintas-asal.
‫Jadi misalnya kita punya API. alam. com untuk API kami,
‫dan kemudian akan melakukan permintaan dari natours. com, itu juga
‫akan dianggap sebagai permintaan lintas-asal,
‫dan akan gagal, oke?
‫Tetapi sekali lagi, karena kami ingin mengizinkan situs
‫web lain pada dasarnya mengakses API
‫kami, sekarang mari kita terapkan berbagi sumber daya lintas-asal.
‫Baiklah, jadi kita melakukannya sekali lagi
‫dengan menginstal paket NPM.
‫Jadi instal NPM, dan cukup CORS.
‫Maka di sini kita membutuhkan paket itu.
‫Dan sekali lagi, CORS ini
‫adalah fungsi middleware yang
‫sangat sederhana yang sekarang perlu kita gunakan untuk aplikasi kita, oke?
‫Jadi mari kita lakukan itu di sini, dan mengapa tidak melakukannya
‫di sini di atas?
‫Jadi katakanlah menerapkan CORS.
‫Dan aplikasi. gunakan, dan kemudian panggil CORS,
‫yang pada gilirannya akan mengembalikan fungsi middleware
‫yang kemudian akan menambahkan beberapa header berbeda
‫ke respons kami.
‫Dan karena semua fungsi middleware di
‫sini pada dasarnya adalah menambahkan beberapa header tertentu, mungkin
‫Anda berpikir "Mengapa kami menggunakan "paket
‫NPM lain? “Nah, langsung
‫saja kita lihat kode
‫dari paket ini.
‫Jadi GitHub CORS, jadi sekali lagi, biasanya
‫begitulah cara saya menemukan dokumentasi atau kode sumber
‫itu sendiri untuk paket saya.
‫Jadi mari kita masuk ke lib, yang
‫biasanya berarti perpustakaan.
‫Dan kemudian semua yang kita miliki di sini adalah indeks ini. js.
‫Jadi Anda melihat bahwa di sini adalah semua kodenya, dan pada
‫dasarnya apa yang
‫Anda lihat di sini adalah bahwa ia hanya menambahkan
‫header ini di sini dengan nilai pada dasarnya segalanya ke header.
‫Baiklah, jadi Anda memiliki beberapa header
‫lain, Access-Control-Allow-Methods, allow-credentials, dan itu untuk
‫kasus yang berbeda.
‫Baiklah, tetapi Anda melihat bahwa
‫ini benar-benar hanya tentang header di sini.
‫Jadi ya, mungkin kita bisa menambahkan header ini sendiri,
‫tapi mengapa kita melakukannya?
‫Maksud saya, tentu saja
‫kita bisa, untuk benar-benar memahami cara kerjanya, tetapi
‫di Node.js. js dan
‫pengembangan Express, di lingkungan nyata Anda
‫biasanya tidak ingin menemukan kembali roda, dan
‫sebaliknya, kapan pun Anda bisa,
‫gunakan paket yang telah ditulis pengembang lain untuk kami.
‫Jadi sebenarnya kami hanya fokus membuat aplikasi kami
‫bekerja, daripada menulis ulang kode yang
‫telah ditulis pengembang lain untuk kami, oke?
‫Jadi kita bisa melihat
‫semua ini, tapi seperti yang saya sebutkan, kita juga
‫bisa melanjutkan dan benar-benar menggunakan ini, oke?
‫Bagaimanapun, ini adalah cara kami mengaktifkan berbagi sumber daya lintas-asal untuk
‫semua permintaan yang masuk.
‫Jadi pada dasarnya untuk seluruh API kami.
‫Tapi katakanlah kita hanya ingin mengaktifkan CORS
‫pada rute tertentu.
‫Jadi kita bisa menggunakannya juga, jadi mari kita salin ini.
‫Jadi jika kita hanya ingin mengaktifkan CORS, katakanlah
‫dalam tur, kita bisa
‫menambahkannya di sini ke tumpukan middleware ini.
‫Baiklah, tetapi sekali lagi dalam hal ini kami
‫benar-benar ingin mengizinkannya di mana-mana.
‫Jadi seperti yang kita lihat sebelumnya
‫dalam kode
‫GitHub, yang dilakukan adalah mengatur header Access-Control-Allow-Origin ke semuanya.
‫Jadi apa artinya semua ini
‫di sini adalah untuk semua permintaan dari mana pun mereka berasal.
‫Jadi ini sangat ideal untuk memungkinkan semua
‫orang menggunakan API kami.
‫Tapi sekarang bayangkan kasus
‫di mana kita tidak ingin membagikan API
‫kita, tetapi kita ingin dapat memiliki API di satu
‫domain, atau bahkan satu subdomain, dan kemudian
‫memiliki aplikasi front-end kita di domain yang berbeda.
‫Misalnya, seperti yang saya sebutkan sebelumnya, kami memiliki API
‫kami di API. alam. com, tapi kemudian
‫aplikasi front-end kami di natours. com.
‫Jadi dalam hal ini semua yang
‫kami ingin lakukan adalah mengizinkan akses dari asal ini di sini, pada dasarnya.
‫Jadi dalam hal ini kita akan menggunakan app. gunakan, dan kemudian CORS,
‫dan kemudian berikan objek untuk opsi di mana kami
‫akan menentukan Asal,
‫katakanlah HTTPS://www. alam. com.
‫Jadi ini hanya sebuah contoh
‫jika kami memiliki front-end kami di natours. com, oke?
‫Dan sekali lagi, dengan ini kami hanya akan
‫mengizinkan URL ini pada dasarnya, jadi asal ini, untuk
‫membuat permintaan ke API. alam. com.
‫Dan tentu saja kita juga bisa mengizinkan asal-usul lain.
‫Misalnya, hanya untuk beberapa situs
‫web tertentu yang kami ingin izinkan, oke?
‫Tapi sekali lagi, dalam hal ini kami benar-benar ingin mengizinkan semua orang.
‫Oke, jadi ini adalah bagian pertama dari mengaktifkan CORS, tetapi
‫sebenarnya bukan itu saja, karena saat
‫ini ini hanya akan berfungsi
‫untuk apa yang disebut permintaan sederhana.
‫Dan permintaan sederhana adalah mendapatkan dan memposting permintaan.
‫Di sisi lain, kami memiliki apa yang disebut permintaan tidak sederhana.
‫Dan ini adalah permintaan put, patch, dan delete, atau
‫juga permintaan yang mengirim cookie atau
‫menggunakan header yang tidak standar.
‫Dan permintaan yang tidak
‫sederhana ini, mereka membutuhkan apa yang disebut fase preflight.
‫Jadi setiap kali ada permintaan yang tidak
‫sederhana, browser akan secara
‫otomatis mengeluarkan fase preflight, dan beginilah cara kerjanya.
‫Jadi sebelum permintaan sebenarnya benar-benar terjadi,
‫dan katakanlah permintaan penghapusan,
‫browser terlebih dahulu melakukan permintaan opsi
‫untuk mengetahui apakah permintaan sebenarnya
‫aman untuk dikirim.
‫Jadi artinya bagi kami para pengembang
‫adalah bahwa di server kami, kami harus benar-benar
‫menanggapi permintaan opsi itu.
‫Dan opsi sebenarnya hanyalah metode HTTP
‫lain, jadi seperti dapatkan, poskan, atau hapus, oke?
‫Jadi pada dasarnya ketika kami mendapatkan salah satu dari permintaan
‫opsi ini di server kami, kami
‫kemudian perlu mengirim kembali header Access-Control-Allow-Origin yang sama.
‫Dan dengan cara ini browser
‫akan mengetahui bahwa
‫permintaan yang sebenarnya, dan dalam hal ini permintaan penghapusan,
‫aman untuk dilakukan, dan kemudian mengeksekusi permintaan penghapusan itu sendiri, oke?
‫Jadi mari kita lakukan itu dan katakan app. pilihan.
‫Oke, dan sekali lagi ini sangat mirip dengan
‫melakukan aplikasi. dapatkan misalnya, atau . Pos, . menghapus, . patch, dan
‫semua kata kerja yang sudah Anda ketahui.
‫Jadi . options bukan untuk menyetel opsi apa pun
‫pada aplikasi kami, ini benar-benar hanya metode HTTP lain yang dapat kami tanggapi.
‫Dan sekali lagi, dalam hal ini kita perlu
‫meresponnya karena browser mengirimkan
‫permintaan opsi ketika ada fase preflight.
‫Jadi kita perlu
‫menentukan rute yang ingin kita tangani opsinya.
‫Dan sekali lagi, kami akan melakukan ini di semua rute, oke?
‫Dan kemudian pada dasarnya
‫handler, yang sekali lagi adalah middleware CORS, oke?
‫Dan sekali lagi, tentu saja kami hanya
‫dapat mengizinkan permintaan kompleks ini hanya pada rute tertentu.
‫Misalnya aplikasi. pilihan,
‫dan katakanlah hanya pada api/v1/tours/:id,
‫seperti ini, oke?
‫Jadi katakanlah seseorang melakukan permintaan penghapusan atau patch untuk
‫salah satu tur, dan hanya di
‫sana kami mengizinkan fase preflight.
‫Jadi pada dasarnya hanya pada rute
‫ini di sini, salah satu permintaan kompleks ini dapat dilakukan.
‫Jadi dalam hal ini di mana kami hanya memiliki rute opsi
‫ini, hanya tur yang dapat dihapus
‫atau ditambal dari permintaan lintas asal, bukan?
‫Dan tidak ada sumber daya kita yang lain, oke?
‫Tapi sekali lagi, biarkan semuanya, oke?
‫Tapi saya masih akan meninggalkan ini di sini untuk Anda sebagai contoh.
‫Oke, bagaimanapun, hanya itu yang harus kita lakukan
‫untuk mengaktifkan CORS untuk aplikasi kita.
‫Jadi sekarang mari kita terapkan ulang aplikasi
‫dengan mendorongnya lagi ke Heroku.
‫Tetapi sebelum kita melakukannya, saya sebenarnya ingin mengubah sesuatu di sini
‫dalam paket kami. json.
‫Dan itu adalah mesin simpul ini di sini.
‫Jadi terkadang bisa menimbulkan masalah
‫saat kita menentukan versi seperti ini.
‫Jadi pada dasarnya mengizinkan versi untuk menginstal yang
‫lebih besar dari versi yang
‫sedang kami jalankan.
‫Jadi yang ingin saya
‫lakukan di sini adalah mengatakan bahwa itu seharusnya hanya menginstal versi
‫10, dan bukan versi setelah itu.
‫Jadi saya melakukannya dengan mengatakan simbol tanda sisipan ini di sini, dan
‫kemudian versi 10.
‫Dan sekali lagi, itu menggunakan versi semantik, dan
‫seperti di sini.
‫Yang perlu diingat, berarti NPM
‫diizinkan untuk menginstal salah satu dari subversi atau versi
‫tambalan ini, tetapi tidak menabrak versi utama berikutnya.
‫Jadi di sini apa yang saya lakukan adalah sama, oke?
‫Jadi saya saat ini menjalankan Node versi 10 sesuatu, dan
‫Anda dapat mengonfirmasi milik Anda dengan mengetikkan node -v, dan Anda melihat bahwa
‫saya menggunakan 10. 11 sekarang.
‫Tapi mungkin saat Anda menonton
‫kursus ini, Anda setidaknya akan berada di versi 12, bahkan mungkin 14 atau
‫16, tergantung berapa lama Anda di masa depan, oke?
‫Dan jangan khawatir tentu saja,
‫semua yang saya tunjukkan di sini dalam kursus ini
‫akan tetap berfungsi dengan
‫baik untuk versi Node apa pun yang Anda gunakan.
‫Jadi jika Anda
‫menggunakan versi 12, silakan dan letakkan 12 di sini, oke?
‫Bagaimanapun, sekarang mari tambahkan semua file
‫yang dimodifikasi ke staging area, jadi git add all.
‫Dan kemudian komit dengan pesan yang bermakna, jadi
‫terapkan CORS.
‫Dan kemudian dapatkan push Heroku master.
‫Dan sekarang itu membutuhkan waktu,
‫jadi saya akan melihat Anda ketika itu selesai.
‫Jadi aplikasinya sudah berhasil di-deploy sekarang, ayo cepat-cepat
‫reload disini hanya untuk
‫melihat apakah masih work, dan memang benar.
‫Dan sekarang untuk membuktikan kepada Anda bahwa itu bekerja secara berbeda dengan CORS, jika
‫kami melakukan permintaan ini
‫di sini lagi, itu akan benar-benar berfungsi, bukan?
‫Jadi mari kita coba itu, dan ini dia.
‫Tidak ada kesalahan kali ini, mari kita periksa x di sini.
‫Dan memang, sepertinya ada sesuatu di sini.
‫Jadi Anda melihat bahwa sebenarnya responsnya adalah tipe CORS,
‫kami memiliki header kami, nah, saya tidak dapat benar-benar melihatnya di sini.
‫Itu tidak masalah, di sini kita juga
‫hanya memiliki string yang dapat
‫dibaca, tetapi sekali lagi itu tidak penting sama sekali.
‫Yang penting di sini
‫adalah sekarang kami dapat melakukan permintaan lintas-asal, jadi itu luar biasa.
‫Sekarang izinkan saya juga menunjukkan kepada Anda tajuk
‫aktual yang ditambahkan oleh paket
‫CORS hanya dengan melakukan beberapa permintaan di sini di Tukang Pos.
‫Jadi dalam produksi, mari kita kirim sekarang.
‫Jadi di sini Anda
‫melihat di header respons bahwa kami sebenarnya
‫memiliki Access-Control-Allow-Origin yang disetel ke semuanya, oke, bagus.
‫Jadi beginilah cara Anda menerapkan berbagi sumber
‫daya lintas-Asal di aplikasi Anda sendiri.