HTML - Web CORS: Panduan untuk Pemula
Hai teman-teman pemula pengembang web! Hari ini, kita akan memulai perjalanan menarik ke dunia CORS. Jangan khawatir jika Anda belum pernah mendengar tentang ini sebelumnya - pada akhir tutorial ini, Anda akan menjadi ahli CORS! Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita masuk ke dalam!
Apa Itu CORS?
CORS singkatan dari Cross-Origin Resource Sharing. Saya tahu itu terdengar seperti hal yang sulit, tapi biarkan saya menjelaskan itu untuk Anda dengan analogi yang menyenangkan.
Imaginasi Anda di restoran mewah (itu adalah browser Anda), dan Anda ingin memesan makanan dari restoran lain di seberang jalan (itu adalah website lain). Biasanya, restoran mewah tidak akan mengizinkan ini karena mereka ingin Anda makan makanannya saja. Tetapi dengan CORS, itu seperti restoran mewah mengatakan, "Yakin, silakan memesan dari seberang jalan!" Itu adalah cara bagi browser web untuk mengizinkan secara aman website untuk meminta sumber daya dari website lain.
Mengapa Kita Butuh CORS?
Pada awal zaman web, browser memiliki kebijakan keamanan yang ketat yang disebut Same-Origin Policy. Kebijakan ini menghalangi website untuk membuat permintaan ke domain lain, yang bagus untuk keamanan tetapi tidak begitu bagus untuk fungsionalitas.
Sebagai web berkembang, pengembang memerlukan cara untuk membuat permintaan cross-origin secara aman. Itu di mana CORS masuk, menyediakan metode aman bagi server untuk merelaksasi Same-Origin Policy dan mengizinkan permintaan cross-origin tertentu.
Bagaimana CORS Bekerja?
CORS bekerja melalui serangkaian header HTTP. Ketika halaman web membuat permintaan ke domain lain, browser menambahkan header khusus yang disebut Origin ke permintaan. Server kemudian menjawab dengan header yang mengatakan kepada browser apakah permintaan diperbolehkan atau tidak.
mari lihat contoh sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Contoh CORS</title>
</head>
<body>
<h1>CORS dalam Aksi</h1>
<button onclick="makeRequest()">Buat Permintaan</button>
<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>Dalam contoh ini, ketika Anda mengklik tombol, itu mencoba mengambil data dari https://api.example.com/data. Jika server di api.example.com dikonfigurasikan dengan benar, ia akan menyertakan header di jawabannya yang mengizinkan halaman Anda mengakses data.
Membuat Permintaan CORS
Sekarang, mari kita masuk lebih mendalam bagaimana membuat permintaan CORS. Kita akan menggunakan Fetch API, yang adalah metode modern dan kuat untuk membuat permintaan jaringan di JavaScript.
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));Kode ini mengirim permintaan GET ke https://api.example.com/data. Tanggapan server akan menentukan apakah permintaan sukses atau tidak.
Jika CORS dikonfigurasikan dengan benar di server, Anda akan melihat data di log. Jika tidak, Anda akan mendapatkan kesalahan CORS, yang mungkin terlihat seperti ini:
Access to fetch at 'https://api.example.com/data' from origin 'http://yourwebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.Jangan panik jika Anda melihat kesalahan ini! Itu hanya berarti server tidak dikonfigurasikan untuk mengizinkan permintaan dari website Anda.
Handler Event dalam CORS
Ketika bekerja dengan CORS, penting untuk menghandle keduanya tanggapan sukses dan kesalahan. Mari kita modifikasi contoh sebelumnya untuk termasuk beberapa handler event:
<!DOCTYPE html>
<html>
<head>
<title>CORS dengan Handler Event</title>
</head>
<body>
<h1>CORS dengan Handler Event</h1>
<button onclick="makeRequest()">Buat Permintaan</button>
<div id="result"></div>
<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
document.getElementById('result').textContent = JSON.stringify(data);
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result').textContent = 'An error occurred: ' + error.message;
});
}
</script>
</body>
</html>Dalam contoh ini, kita telah menambahkan handler event untuk keduanya tanggapan sukses dan kesalahan. Jika permintaan sukses, kita menampilkan data di halaman. Jika ada kesalahan, kita menampilkan pesan kesalahan.
Metode CORS
CORS mendukung berbagai metode HTTP. Berikut adalah tabel yang menguraikan yang paling umum:
| Metode | Deskripsi |
|---|---|
| GET | Mengambil data dari server |
| POST | Mengirim data ke server untuk membuat sumber daya baru |
| PUT | Mengirim data untuk memperbarui sumber daya yang ada di server |
| DELETE | Mengirim permintaan penghapusan sumber daya di server |
| HEAD | Menyerupai GET, tetapi hanya mengambil header, bukan body |
| OPTIONS | Digunakan untuk menjelaskan opsi komunikasi untuk sumber daya target |
Ingat, server harus dikonfigurasikan untuk mengizinkan metode ini untuk permintaan CORS.
Kesimpulan
Selamat! Anda telah mengambil langkah pertama ke dunia CORS. Kita telah menelusuri apa CORS itu, mengapa itu diperlukan, dan bagaimana membuat permintaan CORS dasar. Ingat, CORS tentang membuat web lebih terhubung saat tetap menjaga keamanan.
Sekarang Anda teruskan perjalanan pengembangan web Anda, Anda akan menemukan CORS dalam banyak konteks yang berbeda. Jangan takut terhadap kesalahan CORS - itu hanya kesempatan untuk belajar lebih banyak tentang bagaimana web bekerja!
Teruslatih, tetap curi-curi, dan selamat berkoding!
Credits: Image by storyset