CORS
Memahami CORS sebagai browser enforcement pada cross-origin read, lalu mengumpulkan bukti frontend untuk diagnosis tanpa mencoba bypass policy.
Tujuan belajar
- Menjelaskan origin dan same-origin policy pada browser
- Membedakan CORS browser error dari status API normal
- Membaca origin, request method, credentials, preflight, dan response headers sebagai bukti diagnosis
- Menentukan hal yang perlu dikonfirmasi backend atau platform team
Isi lesson
6 blok- 1.CORS adalah keputusan browser tentang cross-origin readBelum selesaiWajib
- 2.Bukti yang dibutuhkan untuk CORS diagnosisBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.CORS error tidak berarti API pasti downBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
CORS adalah keputusan browser tentang cross-origin read
WajibOrigin terdiri dari scheme, host, dan port. Browser menerapkan same-origin policy agar script dari satu origin tidak bebas membaca response dari origin lain. CORS adalah mekanisme server melalui response headers yang memberi tahu browser origin mana yang boleh membaca response tertentu. CORS bukan authentication, bukan authorization, dan bukan setting yang seharusnya frontend coba akali.
Jika app di http://localhost:3000 memanggil API di https://api.example.com, request dapat memerlukan CORS permission. Browser dapat mengirim preflight OPTIONS sebelum request utama untuk metode atau header tertentu. Saat policy tidak cocok, server mungkin menerima request tetapi browser tetap memblokir JavaScript membaca response. Kumpulkan URL frontend, URL API, method, credentials setting, Network detail, dan error console; lalu konfirmasi header serta allowed origin ke owner server.
Bagian ini memengaruhi progres lesson.
Bukti yang dibutuhkan untuk CORS diagnosis
Wajibconst corsEvidence = {
appOrigin: "http://localhost:3000",
apiOrigin: "https://api.example.com",
method: "POST",
credentialsIncluded: true,
browserMessage: "blocked by CORS policy",
};Evidence ini belum membuktikan header server salah, tetapi cukup untuk membedakan problem browser boundary dari error UI biasa. Bila cookies credential dipakai lintas origin, server harus mengatur origin serta credentials dengan tepat; wildcard tidak cocok untuk credentialed requests. Jangan menyelesaikan error dengan menonaktifkan browser security, menaruh secret di client, atau mengubah URL production secara acak.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususDiagnose course CORS boundary
Catat evidence CORS yang perlu dikumpulkan sebelum meminta owner API memeriksa policy server.
Tujuan awal: Fokus di tab TS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Siapa yang menetapkan header CORS yang mengizinkan browser membaca response API?
Progres lesson naik setelah jawaban benar.
Peringatan
WajibCORS error tidak berarti API pasti down
Browser CORS error dapat terjadi walau API dapat diakses dari server, tool API, atau origin lain. Sebaliknya, 401, 403, 404, atau 500 adalah HTTP response yang berbeda dari CORS block. Jangan melaporkan semuanya sebagai backend rusak. Kirim bukti origin, endpoint, method, credential setting, preflight bila ada, dan console message tanpa menyertakan credential.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Same-origin policy membatasi script membaca response lintas origin.
- CORS memakai policy dari server response agar browser mengetahui origin yang diizinkan.
- CORS berbeda dari authentication, authorization, dan HTTP status error.
- Frontend mendiagnosis dengan evidence; owner server memperbaiki policy bila perlu.
- Berikutnya, kita melihat CSRF pada request yang membawa credential cookie.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: CORS adalah keputusan browser tentang cross-origin read.