Panduan Lengkap CORS di Node.js (CJS & ESM): Biar Backend & Frontend Nggak LDR!

 

Pernah ngalamin error "Blocked by CORS policy" pas nge-fetch API dari frontend ke backend? Rasanya kayak udah sayang, tapi nggak direstui.

Nah, di sinilah CORS (Cross-Origin Resource Sharing) berperan! CORS itu ibarat surat izin pacaran yang ngasih akses frontend buat ngobrol sama backend meskipun beda alamat domain.

Tapi tenang, kita bakal bahas gimana cara mengaktifkan CORS di Node.js baik pakai CommonJS (CJS) maupun ES Module (ESM). Jadi, mau pakai cara lama atau modern, backend kamu bakal tetap ramah! 

Apa Itu CORS dan Kenapa Kita Butuh?

CORS adalah sistem keamanan di browser yang melarang akses dari domain berbeda tanpa izin.

Contohnya:
Backend API: https://api.kucing.com
Frontend: https://kucingpedia.com

Kalau frontend ini coba ambil data dari API tanpa CORS, browser langsung ngegas:

Access to fetch at 'https://api.kucing.com/data' from origin 'https://kucingpedia.com'
has been blocked by CORS policy

Solusinya? Buka akses CORS di backend Node.js biar hubungan frontend-backend makin harmonis! 

Cara Mengaktifkan CORS di Node.js dengan CommonJS (CJS)

Kalau backend kamu pakai CommonJS (CJS), cara setup CORS-nya gini:

Install Middleware CORS

Buka terminal, masuk ke folder proyek Node.js, lalu jalankan:

npm install cors

Beres? Oke, lanjut! 

Implementasi Dasar CORS di Express.js dengan CommonJS

Di file server.js atau index.js, tambahkan kode ini:

const express = require("express");
const cors = require("cors");

const app = express();

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

app.get("/", (req, res) => {
  res.send("CORS sudah aktif, silakan fetch data dengan bebas!");
});

app.listen(3000, () => {
  console.log("Server jalan di http://localhost:3000");
});

Sekarang backend kamu udah bisa diakses dari mana aja!

---

Batasi Akses CORS (Biar Backend Nggak Jadi "Terlalu Murah")

Jangan biarkan backend kamu terlalu terbuka ke semua domain! Kita bisa atur hanya domain tertentu yang boleh akses:

const corsOptions = {
  origin: "https://kucingpedia.com", // Hanya domain ini yang boleh akses
  methods: "GET,POST,PUT,DELETE", // Batasi metode HTTP
  allowedHeaders: "Content-Type,Authorization", // Tentukan header yang boleh
};

app.use(cors(corsOptions));

Sekarang kalau ada frontend dari https://hacker.com mau nyelonong, langsung ditolak mentah-mentah! 

Aktifkan CORS untuk Autentikasi (JWT, Cookies, dll.)

Kalau aplikasi kamu pakai JWT token atau session cookie, kamu perlu aktifkan credentials:

const corsOptions = {
  origin: "https://kucingpedia.com",
  credentials: true, // Izinkan cookie/token dikirim dari frontend
};

app.use(cors(corsOptions));

Di frontend juga harus ditambah:

fetch("https://api.kucing.com/data", {
  credentials: "include", // Supaya token/cookie dikirim ke backend
});

Sekarang backend kamu nggak cuma ramah, tapi juga tetap aman! 

Cara Mengaktifkan CORS di Node.js dengan ES Module (ESM)

Kalau kamu lebih suka sintaks modern pakai ES Module (ESM), begini caranya:

Pastikan Pakai ESM

Secara default, Node.js pakai CommonJS (CJS), jadi kita harus mengaktifkan ESM dengan dua cara:

Cara 1: Ubah nama file jadi .mjs (misal: server.mjs)
Cara 2: Tambahkan "type": "module" di package.json

{
  "type": "module"
}

Kalau udah, kita bisa pakai sintaks import!

Implementasi CORS dengan ES Module (ESM)

Buka file server.mjs dan tambahkan kode ini:

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

const app = express();

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

app.get("/", (req, res) => {
  res.send("CORS sudah aktif dengan ES Module!");
});

app.listen(3000, () => {
  console.log("Server jalan di http://localhost:3000");
});

Jalankan dengan:

node server.mjs

Sekarang backend kamu sudah modern dan tetap CORS-friendly!

Batasi Akses CORS di ES Module

Sama seperti di CJS, kita bisa kasih akses hanya ke domain tertentu:

const corsOptions = {
  origin: "https://kucingpedia.com",
  methods: ["GET", "POST", "PUT", "DELETE"],
  allowedHeaders: ["Content-Type", "Authorization"],
};

app.use(cors(corsOptions));

Frontend lain tetap ditolak, cuma domain yang sah yang boleh masuk!

Kesimpulan: Backend & Frontend Nggak LDR Lagi!

CORS itu penting buat kasih izin ke frontend supaya bisa akses backend yang beda domain.
CJS vs. ESM:
Pakai require() kalau masih pake CommonJS (CJS)
Pakai import kalau sudah pake ES Module (ESM)
Buka akses ke semua domain atau batasi ke domain tertentu (biar nggak terlalu murah! )
Kalau pakai autentikasi, aktifkan credentials: true biar token/cookie bisa dikirim!

Sekarang backend Node.js kamu nggak jaim lagi!  Silakan tes dan nikmati koneksi frontend-backend yang harmonis!