Solusi Mengatasi CORS Error di WordPress REST API Saat Akses Antar Domain (VPS / HestiaCP)

Posted on by OmPuter

Ketika kita menggunakan WordPress REST API untuk menampilkan data dari satu domain ke domain lain (cross-domain), sering muncul error seperti ini di browser console:

Access to fetch at 'https://example.com/wp-json/wp/v2/posts' from origin 'https://anotherdomain.com' has been blocked by CORS policy...

Masalah ini biasanya tidak muncul saat di shared hosting, tapi akan muncul ketika kita pindah ke VPS seperti dengan HestiaCP + NGINX + Apache, karena konfigurasi header Access-Control-Allow-Origin tidak ditangani dengan baik secara otomatis.

🧠 Kenapa Masalah Ini Terjadi?

Masalah utamanya adalah:

  • Header CORS disetel dari lebih dari satu sumber (misalnya dari .htaccess dan dari PHP/plugin).
  • NGINX atau Apache menghalangi .htaccess bekerja (tergantung konfigurasi).
  • WordPress REST API tidak secara default mengizinkan akses dari domain lain.

Kalau ini terjadi, browser akan menolak respons meski statusnya 200 (OK), karena header-nya dianggap tidak valid:

Access-Control-Allow-Origin header contains multiple values…

🎯 Solusi Terbaik: Buat Plugin CORS Sederhana

Agar aman dan bekerja di semua kondisi (VPS atau shared hosting), solusinya adalah menambahkan header CORS langsung via plugin WordPress.

📦 Contoh Plugin:

Buat file bernama allow-wp-rest-cors.php dan simpan di folder:

/wp-content/plugins/allow-wp-rest-cors/

Isi file plugin:

<?php
/**
 * Plugin Name: Allow WP REST API CORS
 * Description: Mengizinkan akses REST API antar domain (CORS).
 * Version: 1.0
 * Author: ChatGPT & Kamu
 */

add_action('rest_api_init', function () {
    // Ganti * dengan domain tertentu jika ingin lebih aman
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type, Authorization");
}, 15);

🛠 Cara Mengaktifkan:

  1. Zip folder tersebut.
  2. Upload ke Plugins > Add New > Upload Plugin di WordPress Admin.
  3. Aktifkan plugin.
  4. Selesai!

🧪 Hasilnya

Setelah plugin aktif:

  • Semua permintaan ke endpoint wp-json bisa diakses dari domain mana saja (jika * digunakan).
  • Tidak ada lagi error CORS di browser console.
  • Kamu tidak perlu utak-atik .htaccess, NGINX, atau Apache config.

🔐 Keamanan

Kalau kamu ingin lebih aman, sebaiknya ganti * dengan domain tertentu agar hanya situs kamu sendiri yang bisa mengakses REST API:

header("Access-Control-Allow-Origin: https://applulbayt.web.id");

📝 Kesimpulan

Jika kamu mengalami error CORS saat memakai WordPress REST API di server VPS seperti HestiaCP, solusi paling mudah dan aman adalah membuat plugin seperti di atas. Dengan begitu, header dikontrol langsung dari WordPress dan tidak tumpang tindih dengan konfigurasi server.

Semoga jadi catatan yang berguna untuk kamu — dan juga bisa bantu orang lain yang mengalami hal serupa!

Post Views: 168