---
title: CORS
description: "Aturan browser untuk request lintas origin. Salah konfigurasi memblokir API, terlalu longgar membuka data."
canonical: https://penasihathosting.com/wikihosting/cors
type: wiki
locale: id
updated: 2026-10-29
author: Willya Randika
---

# CORS

## Overview

- **Summary:** Aturan browser untuk request lintas origin. Salah konfigurasi memblokir API, terlalu longgar membuka data.
- **Author:** Willya Randika ([profile](/penulis/willya-randika))

## Article

CORS adalah mekanisme browser yang menentukan apakah JavaScript di origin A boleh membaca respons dari origin B. Origin terdiri dari skema, host, dan port. `https://app.contoh.com` dan `https://api.contoh.com` dianggap dua origin berbeda meskipun domainnya sama.

## Kapan browser bertanya

Request sederhana seperti GET tanpa header khusus bisa langsung dikirim. Request PUT, DELETE, PATCH, atau yang memakai `Content-Type: application/json` biasanya memicu preflight OPTIONS. Browser bertanya lebih dulu apakah metode dan header diizinkan, lalu mengirim request sebenarnya kalau server menjawab dengan benar.

Header yang terlibat antara lain `Access-Control-Allow-Origin`, `Access-Control-Allow-Methods`, `Access-Control-Allow-Headers`, dan `Access-Control-Allow-Credentials`. `Access-Control-Max-Age` menentukan berapa lama hasil preflight disimpan browser. Tambahkan `Vary: Origin` supaya cache tidak menyajikan respons untuk origin yang salah.

`Access-Control-Allow-Origin: *` tidak boleh digabung dengan `Access-Control-Allow-Credentials: true`. Browser akan menolaknya. Kalau memakai cookie, server harus mengembalikan origin spesifik.

## Contoh di Nginx

```nginx
location /api/ {
    add_header Access-Control-Allow-Origin "https://app.contoh.com" always;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Vary "Origin" always;

    if ($request_method = OPTIONS) {
        return 204;
    }
}
```

Kalau origin banyak, jangan menyalin semuanya ke konfigurasi statis tanpa strategi. Validasi header `Origin` terhadap allowlist di aplikasi, lalu kembalikan nilai yang cocok.

## CORS bukan autentikasi

CORS hanya membatasi browser. Penyerang bisa memanggil API dari server sendiri tanpa peduli header ini. Karena itu, tetap gunakan token, session, dan otorisasi di server.

Wildcard juga berbahaya kalau respons berisi data pengguna atau cookie. Lupa `Vary: Origin` bisa membuat CDN menyajikan respons milik origin lain. Preflight yang diproteksi auth juga sering gagal karena endpoint OPTIONS ikut meminta token.

Untuk aplikasi yang memakai iframe atau widget pihak ketiga, kombinasikan CORS dengan [CSP](/wikihosting/csp). Kalau API dibuka untuk frontend terpisah, dokumentasikan origin yang diizinkan.

Kalau frontend memanggil backend terpisah, aturan ini sering muncul saat menghubungkan ke [API](/wikihosting/api).

## FAQ

<Accordion>
  <AccordionItem title="Mengapa request dari Postman berhasil tetapi dari browser gagal?">
    Postman tidak menerapkan same-origin policy. Browser mengirim preflight dan memeriksa header CORS. Perbaiki respons server, bukan aplikasi klien.
  </AccordionItem>
  <AccordionItem title="Apakah CORS perlu diatur di CDN?">
    Kalau CDN menyajikan API atau aset yang diakses lintas origin, atur header di origin dan pastikan CDN tidak menghapus `Vary: Origin`.
  </AccordionItem>
  <AccordionItem title="Bisakah CORS memblokir request server ke server?">
    Tidak. CORS adalah aturan browser. Server lain bebas memanggil API Anda. Gunakan autentikasi dan rate limit untuk melindunginya.
  </AccordionItem>
</Accordion>