Error CORS: Penyebab dan Cara Fix Lengkap

CORS (Cross-Origin Resource Sharing) adalah salah satu error paling sering ditemui developer web. Artikel ini menjelaskan kenapa CORS ada dan bagaimana cara mengatasinya.

Apa itu CORS?

CORS adalah mekanisme keamanan browser yang membatasi request HTTP dari satu origin ke origin yang berbeda. Misalnya, frontend di localhost:3000 tidak bisa langsung fetch data dari API di localhost:8000.

Kenapa CORS Ada?

Untuk melindungi user dari serangan CSRF (Cross-Site Request Forgery). Tanpa CORS, website jahat bisa membuat request ke bank online kamu menggunakan cookies yang tersimpan di browser.

Cara Fix CORS

1. Di Backend (Express)

const cors = require("cors");
app.use(cors({ origin: "http://localhost:3000" }));

2. Di Next.js API Routes

export async function GET() {
  return Response.json(data, {
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  });
}

3. Proxy di Development

Di next.config.ts:

async rewrites() {
  return [{
    source: "/api/:path*",
    destination: "http://localhost:8000/:path*",
  }];
}

CORS bukan musuh — ia melindungi user kamu. Pahami mekanismenya dan fix di sisi yang tepat (backend).