HTML - Web CORS: A Panduan Pemula

Hai there, para pengembang web yang sedang belajar! Hari ini, kita akan memulai perjalanan menarik ke dunia CORS. Jangan khawatir jika Anda belum pernah mendengar tentang itu sebelumnya - setelah menyelesaikan panduan ini, Anda akan menjadi ahli CORS! Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita masuk ke dalam!

HTML - Web CORS

Apa Itu CORS?

CORS singkatan dari Cross-Origin Resource Sharing. Saya tahu itu terdengar seperti suatu hal yang sulit, tapi biarkan saya memecahkannya untuk Anda dengan analogi yang menyenangkan.

Bayangkan Anda berada di restoran mewah (itu adalah browser Anda), dan Anda ingin memesan makanan dari restoran lain di seberang jalan (itu adalah website yang berbeda). Biasanya, restoran mewah tidak akan mengizinkan ini karena mereka ingin Anda makan makanan mereka saja. Tetapi dengan CORS, itu seperti restoran mewah mengatakan, "Yakin, pesan saja dari seberang jalan!" Itu adalah cara bagi browser web untuk secara aman mengizinkan 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 baik untuk keamanan tetapi kurang baik untuk fungsionalitas.

Seiring dengan evolusi web, pengembang membutuhkan cara untuk membuat permintaan cross-origin secara aman. Itu adalah di mana CORS memasuki, menyediakan metode keamanan bagi server untuk memperlonggar 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 memberitahu browser apakah permintaan diperbolehkan.

mari kita 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 cara 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. Respon server akan menentukan apakah permintaan sukses atau tidak.

Jika CORS dikonfigurasikan dengan benar di server, Anda akan melihat data dicatat di console. 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! Ini 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 menambahkan 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	Meminta penghapusan sumber daya di server
HEAD	Menyerupai GET, tetapi hanya mengambil header, bukan body
OPTIONS	Digunakan untuk mendeskripsikan 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 melihat apa CORS itu, mengapa itu diperlukan, dan bagaimana membuat permintaan CORS dasar. Ingat, CORS tentang membuat web lebih terhubung saat tetap menjaga keamanan.

Sebagai Anda terus melanjutkan perjalanan pengembangan web Anda, Anda akan menemukan CORS dalam banyak konteks yang berbeda. Jangan takut terhadap kesalahan CORS - itu adalah kesempatan untuk belajar lebih banyak tentang bagaimana web bekerja!

Teruslatih, tetap curiga, dan selamat mengoding!

Credits: Image by storyset