Memahami CORS dan Implementasinya Menggunakan croot.js dengan ES6 Module

Dalam proses belajar pengembangan web, saya mencoba membuat aplikasi sederhana dengan memisahkan frontend dan backend. Frontend berjalan di http://localhost:3000, sedangkan backend berjalan di [http://localhost:5000.](http://localhost:5000.)

Awalnya saya mengira keduanya bisa langsung terhubung. Namun, ketika mencoba mengambil data dari backend, muncul error yang cukup membingungkan. Setelah ditelusuri, ternyata masalah tersebut berkaitan dengan CORS.

Dari pengalaman ini, saya mulai memahami bahwa CORS bukan sekadar error, tetapi bagian dari sistem keamanan yang penting dalam pengembangan web.

Apa itu CORS?

CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan yang diterapkan oleh browser untuk mengatur akses resource dari origin yang berbeda.

Origin sendiri terdiri dari tiga bagian utama:

• Protocol (http/https)
• Domain
• Port

Jika salah satu dari ketiga bagian tersebut berbeda, maka dianggap sebagai origin yang berbeda.

Melalui CORS, server dapat menentukan apakah request dari origin lain diperbolehkan atau tidak.

Mengapa CORS Dibutuhkan?

Tanpa adanya CORS, sebuah website bisa dengan bebas mengambil data dari domain lain, yang berpotensi membahayakan keamanan pengguna.

Oleh karena itu, browser menerapkan kebijakan yang disebut Same-Origin Policy (SOP). Kebijakan ini membatasi akses antar origin untuk mencegah penyalahgunaan data.

Dengan adanya CORS, akses tetap bisa dilakukan, tetapi harus melalui izin dari server.

Permasalahan yang Terjadi

Saat mencoba menghubungkan frontend dan backend, biasanya akan muncul error seperti berikut:

Access to fetch at 'http://localhost:5000' from origin 'http://localhost:3000'
has been blocked by CORS policy

Error ini menunjukkan bahwa request dari frontend ditolak oleh browser karena server belum memberikan izin akses.

Hal ini sering terjadi terutama saat proses development, ketika frontend dan backend dijalankan secara terpisah.

Cara Mengatasi CORS

Ada beberapa cara yang dapat digunakan untuk mengatasi masalah CORS, di antaranya:

1. Menggunakan Middleware CORS

Cara paling umum dan praktis adalah menggunakan middleware cors pada backend, khususnya pada Node.js.

2. Mengatur Origin Tertentu

Untuk meningkatkan keamanan, server dapat diatur agar hanya menerima request dari origin tertentu saja.

3. Menambahkan Header Secara Manual

Selain menggunakan middleware, pengaturan juga dapat dilakukan secara manual melalui header HTTP.

Meskipun ada beberapa cara, penggunaan middleware cors menjadi pilihan yang paling sering digunakan karena lebih sederhana dan efisien.

Sekilas tentang ES6 Module

Dalam implementasi nanti, saya menggunakan ES6 Module. Berbeda dengan versi sebelumnya yang menggunakan require, ES6 Module menggunakan import dan export.

Contohnya:

import express from "express";

Penggunaan ES6 Module membuat kode menjadi lebih modern dan terstruktur.

Rencana Implementasi dengan croot.js

Pada tahap selanjutnya, saya akan melakukan implementasi langsung menggunakan file croot.js. File ini akan dijalankan menggunakan Node.js dengan pendekatan ES6 Module.

Implementasi ini bertujuan untuk:

• Mengaktifkan CORS pada server
• Menguji apakah error CORS sudah teratasi
• Memahami bagaimana request dari frontend dapat diterima oleh backend

Dengan adanya implementasi ini, diharapkan konsep CORS tidak hanya dipahami secara teori, tetapi juga secara praktik.

Implementasi CORS Menggunakan croot.js dengan ES6 Module

Persiapan Awal

Pada tahap ini, kita akan langsung mempraktikkan bagaimana cara mengatasi error CORS menggunakan Node.js dengan bantuan middleware cors.

Pastikan sudah terinstall:

• Node.js
• Text editor (VS Code atau lainnya)

1. Membuat Project Baru

Buka terminal, lalu jalankan perintah berikut:

npm init -y

Perintah ini akan membuat file package.json secara otomatis.

2. Install Dependency

Selanjutnya install library yang dibutuhkan:

npm install express cors

• express digunakan untuk membuat server
• cors digunakan untuk mengatasi masalah CORS

3. Mengaktifkan ES6 Module

Buka file package.json, lalu tambahkan:

"type": "module"

Ini penting supaya kita bisa menggunakan syntax import.

4. Membuat File croot.js

Buat file baru dengan nama:

croot.js

Lalu isi dengan kode berikut:

import express from "express";
import cors from "cors";

const app = express();

// Mengaktifkan CORS
app.use(cors());

app.get("/", (req, res) => {
  res.send("AMAN, CORS AKTIF!");
});

app.listen(5000, () => {
  console.log("Server jalan di port 5000");
});

Pada bagian app.use(cors()), CORS diaktifkan sehingga server dapat menerima request dari origin lain.

5. Menjalankan Server

Jalankan perintah berikut di terminal:

node croot.js

Jika berhasil, akan muncul:

6. Pengujian CORS

Untuk menguji apakah CORS sudah berhasil:

• Buka halaman browser ke [http://localhost:5000](http://localhost:5000)
• Jika muncul pesan “CORS berhasil diaktifkan!”, berarti server sudah berjalan dengan baik

Untuk memastikan apakah CORS sudah berfungsi dengan baik, dilakukan pengujian melalui browser dan console.

1. Menjalankan Backend

Pastikan server backend sudah berjalan dengan baik menggunakan perintah berikut:

node croot.js

Jika berhasil, akan muncul pesan bahwa server berjalan pada port 5000.

2. Membuka Backend di Browser

Buka browser dan akses:

http://localhost:5000

Jika muncul response seperti:

Maka backend sudah berjalan dengan baik.

3. Membuat Frontend Sederhana

Untuk melakukan pengujian, dibuat file HTML sederhana yang berfungsi untuk mengirim request ke backend.

Contoh isi file index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Test CORS</title>
</head>
<body>

<h2>Test CORS</h2>

<script>
fetch("http://localhost:5000")
  .then(res => res.text())
  .then(data => console.log("Response:", data))
  .catch(err => console.error("Error:", err));
</script>

</body>
</html>

4. Menjalankan Frontend dengan Server Lokal

Agar frontend memiliki origin yang berbeda dengan backend, file HTML dijalankan menggunakan server lokal dengan perintah:

npx serve

Setelah itu, frontend dapat diakses melalui:

http://localhost:3000

5. Membuka Console Browser

• Klik kanan pada halaman frontend
• Pilih Inspect / Periksa
• Pilih tab Console

6. Pengujian Tanpa CORS

Nonaktifkan middleware CORS pada backend dengan menghapus atau mengomentari:

// app.use(cors());

Kemudian restart server dan reload halaman frontend.

Hasil yang didapatkan adalah muncul error pada console seperti:

Hal ini menunjukkan bahwa request dari frontend ditolak oleh browser.

7. Pengujian Dengan CORS

Aktifkan kembali middleware CORS:

app.use(cors());

Restart server dan reload halaman.

Hasilnya, request berhasil diproses dan tidak ada error pada console. Response dari backend dapat ditampilkan dengan baik.

Kesimpulan

Berdasarkan pembahasan dari awal hingga tahap implementasi, dapat disimpulkan bahwa CORS (Cross-Origin Resource Sharing) merupakan mekanisme keamanan penting yang diterapkan oleh browser untuk mengatur komunikasi antar origin yang berbeda. Perbedaan origin dapat terjadi karena perbedaan protocol, domain, maupun port, seperti pada kasus frontend localhost:3000 dan backend localhost:5000.

Awalnya, request dari frontend ke backend tidak dapat berjalan dan menghasilkan error CORS. Hal ini terjadi karena adanya kebijakan Same-Origin Policy (SOP) yang membatasi akses lintas origin demi menjaga keamanan data pengguna.

Melalui implementasi menggunakan Node.js pada file croot.js, masalah tersebut dapat diatasi dengan menambahkan middleware cors. Dengan adanya konfigurasi ini, server memberikan izin akses sehingga request dari frontend dapat diterima dan diproses dengan baik.

Selain itu, penggunaan ES6 Module dengan syntax import memberikan struktur kode yang lebih modern dan mudah dipahami dibandingkan dengan metode sebelumnya (require). Hal ini menunjukkan bahwa penerapan teknologi terbaru juga mendukung pengembangan aplikasi yang lebih rapi dan terorganisir.

Pengujian yang dilakukan melalui browser dan console menunjukkan perbedaan yang jelas antara kondisi sebelum dan sesudah CORS diaktifkan. Tanpa CORS, request ditolak, sedangkan dengan CORS, komunikasi antara frontend dan backend berjalan dengan lancar.

Dengan demikian, dapat disimpulkan bahwa CORS bukan sekadar error, melainkan bagian penting dalam sistem keamanan web. Pemahaman dan implementasi yang tepat terhadap CORS akan membantu developer dalam membangun aplikasi yang aman, terstruktur, dan mampu berkomunikasi antar sistem dengan baik.