Apa itu CORS,Middleware, dan Environment

Sekarang website dan aplikasi sudah mulai berkembang pesat. Dan sistem keamanan juga mulai lebih kuat. Mungkin kalian ada yang menghadapi suatu masalah dengan sistem keamanan kalian. Ada orang asing yang masuk kedalam web kalian dan merusaknya. Disini kita akan membahas fitur keamanan yang banyak orang pakai.

1. CORS

Singkatnya CORS adalah singkatan dari Cross Origin Resource Sharing. Yaitu mekanisme berbasis header HTTP yang memungkinkan server menunjukkan asal apa pun (domain, skema, atau port) selain miliknya sendiri yang mana browser harus mengizinkan pemuatan sumber daya. Fitur ini dapat memberikan batasan untuk mengakses web, sehingga aman dari suatu bencana.

Contohnya domain-a.com melakukan fetching API data menggunakan domain-b.com.Di domain-b.com menerapkan CORS maka akan menampilkan pesan error. Jika nama domainnya sama dan tidak menerapkan kebijakan CORS, maka tidak akan menampilkan pesan error tersebut.

// pages/api/example.ts
import { NextApiRequest, NextApiResponse } from 'next';
import withCors from '../middleware/cors';

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  // Logika handler API di sini
  res.status(200).json({ message: 'Hello from the API!' });
};

// Menggunakan middleware CORS untuk endpoint ini
export default withCors(handler);

2. Middleware

Middleware adalah perangkat lunak yang berada di antara aplikasi atau sistem operasi dan memfasilitasi komunikasi atau pemrosesan data di antara keduanya. Dalam konteks pengembangan perangkat lunak, middleware berfungsi sebagai lapisan perantara atau pustaka perangkat lunak yang menyediakan fungsionalitas tambahan, seringkali dalam bentuk layanan, untuk mendukung aplikasi yang lebih besar.

Implementasi middleware:

// middleware/cors.ts
import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next';
import type Cors from 'cors';

// Inisialisasi middleware CORS dengan konfigurasi sesuai kebutuhan
const corsOptions = {
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
};
const corsMiddleware = Cors(corsOptions);

// Middleware untuk menangani CORS
const withCors = (apiHandler: NextApiHandler) => async (
  req: NextApiRequest,
  res: NextApiResponse
) => {
  // Mengaktifkan CORS untuk setiap permintaan
  await corsMiddleware(req, res);

  // Menjalankan handler setelah middleware CORS
  return apiHandler(req, res);
};

export default withCors;

3. Environment

Secara keseluruhan, “environment” atau lingkungan dalam konteks pengembangan perangkat lunak mencakup serangkaian faktor, konfigurasi, dan konteks yang memengaruhi bagaimana suatu aplikasi beroperasi.

Implentasi Env:

NEXT_PUBLIC_API_URL=http://localhost:3000

Jika Berhasil maka hasilnya akan seperti ini:

Bisa kalian lihat dan coba di repo di link ini.

Ahmad Danesh S

“ Trying to be better ”

PPQ IT Al-Mahir