Mengatasi Masalah CORS di Next.js API

Mengatasi Masalah CORS di Next.js API

Pernahkah Anda mencoba memuat data dari API di proyek Next.js, tetapi malah mendapatkan pesan error aneh tentang CORS? Masalah ini umum terjadi dan penyebabnya adalah kebijakan keamanan browser yang ketat.

Apa itu CORS dan Mengapa Masalah Ini Terjadi?

CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan yang diterapkan oleh browser. Tujuannya untuk mencegah website dari satu domain mengambil data dari domain lain tanpa izin. Misalnya, jika situs Anda berjalan di localhost:3000 dan API Anda di api.contoh.com, browser akan otomatis memblokir permintaan tersebut kecuali server API Anda mengizinkannya secara eksplisit. Tanpa izin ini, browser akan menampilkan error CORS.

Solusinya

Solusinya adalah memberi tahu browser bahwa permintaan dari domain Anda diizinkan. Ini dilakukan dengan menambahkan header tertentu pada respons API Anda.

Solusi untuk Next.js API Routes
Jika Anda menggunakan Next.js API Routes, tambahkan header berikut ke dalam handler API Anda.

JavaScrip 

// pages/api/data.js
export default function handler(req, res) {
     // Mengizinkan permintaan dari domain frontend Anda
     res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
     res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
     res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
     // Logika API Anda res.status(200).json({ message: 'Data berhasil diterima!' });
 }

Dengan menambahkan baris res.setHeader('Access-Control-Allow-Origin', ...);, Anda menginstruksikan browser untuk mengizinkan localhost:3000 mengambil data dari API ini.

Solusi untuk Server Express.js
Jika Anda menggunakan server Express.js, cara termudah adalah dengan menggunakan middleware cors. 

1. Instal paket cors:
2. Gunakan di server Anda:
JavaScript
// server.js
    const express = require('express');
    const cors = require('cors');
    const app = express();
    app.use(cors()); // Ini akan mengizinkan semua domain
    app.get('/api/data', (req, res) => {
         res.json({ message: 'Data berhasil diterima' });
     });
app.listen(3001);

Jika Anda ingin lebih spesifik, Anda bisa mengizinkan hanya domain tertentu:
JavaScript
 // server.js (contoh Express dengan opsi)
const corsOptions = {
     origin: 'http://localhost:3000', // Ganti dengan domain frontend Anda
 };
app.use(cors(corsOptions));

Dengan mengimplementasikan salah satu solusi di atas, Anda dapat memastikan bahwa komunikasi antara frontend Next.js dan API Anda berjalan lancar tanpa terhalang error CORS