CORS dengan tower-http — CompileDaily Study

Penjelasan

CORS (Cross-Origin Resource Sharing) adalah mekanisme browser yang membatasi request dari satu origin (domain+port) ke origin lain, kecuali server tujuan secara eksplisit mengizinkannya lewat header HTTP. Ini relevan begitu frontend-mu (misalnya React yang jalan di `localhost:5173`) memanggil API Axum-mu yang jalan di `localhost:3000`. Axum menangani CORS lewat `CorsLayer` dari crate `tower-http`, dipasang seperti layer lainnya lewat `.layer(...)`. `CorsLayer` punya builder method untuk mengatur origin mana yang diizinkan (`.allow_origin(...)`), method HTTP apa saja (`.allow_methods(...)`), dan header apa saja (`.allow_headers(...)`). Untuk development, `CorsLayer::permissive()` sering dipakai karena mengizinkan hampir semua origin/method/header — tapi JANGAN dipakai di production karena berarti API-mu bisa dipanggil dari domain mana pun. Di production, selalu spesifikkan origin yang diizinkan secara eksplisit.

Contoh Konsep

// cargo add tower-http --features cors

use axum::{routing::get, Router};
use tower_http::cors::{Any, CorsLayer};

async fn hello() -> &'static str { "Hello!" }

#[tokio::main]
async fn main() {
    // Untuk production: ganti Any dengan origin spesifik, mis. "https://frontend.com".parse().unwrap()
    let cors = CorsLayer::new()
        .allow_origin(Any)
        .allow_methods(Any);

    let app = Router::new()
        .route("/", get(hello))
        .layer(cors);

    let listener = tokio::net::TcpListener::bind("127.0.0.1:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

Praktikum

Konfigurasikan CorsLayer agar hanya mengizinkan method GET dan POST.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Kalau frontend-mu mengirim header custom (misalnya `Authorization` untuk token JWT), pastikan header itu didaftarkan lewat `.allow_headers([...])`, kalau tidak browser akan memblokir request di tahap preflight (`OPTIONS`) sebelum request sungguhan sempat terkirim ke server.