CORS Middleware — CompileDaily Study

Penjelasan

CORS (Cross-Origin Resource Sharing) perlu dikonfigurasi kalau API Actix-web-mu diakses dari frontend yang berjalan di origin/domain berbeda (misalnya frontend React di `localhost:3000` mengakses API di `localhost:8080`) — tanpa konfigurasi ini, browser akan memblokir request tersebut karena kebijakan same-origin. Crate `actix-cors` menyediakan middleware `Cors` yang bisa dikonfigurasi origin mana saja yang diizinkan, method HTTP apa saja, dan header apa saja, lalu didaftarkan lewat `.wrap()` seperti middleware lainnya.

Contoh Konsep

use actix_cors::Cors;
use actix_web::{App, HttpServer};

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        let cors = Cors::default()
            .allowed_origin("http://localhost:3000")
            .allowed_methods(vec!["GET", "POST", "PUT", "DELETE"])
            .allow_any_header();

        App::new().wrap(cors)
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

Praktikum

Lengkapi konfigurasi CORS agar mengizinkan origin dari "http://localhost:3000".

Editor Latihan

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

Tips

Hindari memakai `Cors::permissive()` di production — method ini mengizinkan semua origin, method, dan header, yang berisiko keamanan. Gunakan hanya saat development lokal, lalu batasi eksplisit sebelum deploy.