Cara Memperbaiki Galat "Updating Failed. The Response is not a valid JSON response." pada WordPress

Selamat datang di ChotibulStudio. Pada artikel kali ini, saya ingin berbagi tentang bagaimana cara memperbaiki galat "Updating failed. The response is not valid a JSON response." yang terjadi pada CMS sejuta umat, WordPress.

Galat tersebut biasanya muncul pada editor blok baru WordPress, Gutenberg, yang disebabkan oleh miskonfigurasi pada sisi web server.

Maksud hati ingin mengamankan wp-json agar tidak dapat diakses oleh sembarang pengguna, baik itu pengguna seperti kita (manusia), maupun pengguna agen peramban web, tapi ternyata justru malah menghambat proses di internal WordPress-nya sendiri.

Seperti yang telah kita ketahui, Gutenberg, editor baru WordPress membutuhkan respon JSON agar dapat digunakan dengan nyaman.

Hal itulah yang belakangan saya temui di situs web teman saya.

Studi kasus

Beberapa waktu yang lalu, seorang teman menghubungi saya. Dia meminta bantuan untuk memperbaiki situs WordPress-nya.

Ia mengeluhkan fitur simpan otomatis dari blok editor Gutenberg-nya tidak berjalan dan muncul peringatan "Updating Failed. The Response is not a valid JSON response.". Setelah masuk ke dasbor utama, saya kemudian mengecek bagian Site Health, sebuah fitur untuk memeriksa kondisi kesehatan WordPress, di sana ada informasi yang menyatakan The REST API encountered an unexpected result dengan galat seperti berikut.

REST API Endpoint: https://domain.tld/wp-json/wp/v2/types/post?context=edit
REST API Response: (403) Forbidden

WordPress tersebut berjalan di atas sistem LEMP Stack (Linux, Nginx, MariaDB dan PHP).

Penyelesaian masalah

Baik, langsung saja, berikut ada penyelesaian masalahnya.

1. Edit berkas hosts

Untuk mengedit berkas hosts di sistem operasi berbasis Linux, eksekusi perintah berikut di Terminal.

$ sudo nano /etc/hosts

Tambahkan IP server berikut dengan domainnya, misalnya seperti ini:

192.168.254.90    domain.tld   www

Simpan konfigurasi yang sudah dibuat.

2. Cek konfigurasi di blok situs Nginx

Pada kasus ini, ada sebaris konfigurasi pada blok konfigurasi situs yang menghalau atau tidak mengizinkan untuk mengakses wp-json, kurang lebih konfigurasinya seperti ini.

location /wp-json/ { deny all; return 403; }

Baris tersebut boleh dihapus, atau untuk kebutuhan pemecahan masalah, saya lebih suka menutupnya dengan tanda pagar (#), hingga menjadi seperti ini.

#location /wp-json/ { deny all; return 403; }

Dengan begitu, Nginx tidak lagi membaca baris konfigurasi tersebut.

Simpan konfigurasi yang sudah dibuat dan mulai ulang layanan Nginx.

Sampai pada langkah ini, seharusnya peringatan "Updating Failed. The Response is not a valid JSON response." pada WordPress, khususnya pada bagian blok editor Gutenberg sudah dapat diatasi.

Hanya saja, muncul permasalahan baru, yaitu keamanan.

Sekarang wp-json dapat diakses siapapun di internet. Tanpa autentikasi apapun.

Langkah ke-3 ini merupakan langkah yang mencegah siapapun untuk dapat mengakses wp-json, kecuali pengguna atau admin situs yang dapat masuk ke dasbor.

3. Amankan dari sisi WordPress

Untuk mengimplementasikan langkah no. 3 ini, Anda perlu menyiapkan satu kebutuhan khusus. Yaitu tema anak atau child theme.

Kenapa mesti butuh tema anak?

Ya, karena kita perlu sedikit melakukan modifikasi pada berkas functions.php yang terdapat pada direktori tema anak. Apabila Anda melakukan perubahan tersebut pada tema induk tidak di tema anak, maka perubahan yang Anda lakukan akan hilang pada saat tema tersebut diperbarui.

Untuk membuat tema anak di WordPress, Anda bisa merujuk pada artikel Buat WordPress Child Theme Anda Sendiri.

Setelah tema anak Anda sudah siap dan sudah diaktifkan, silakan buka berkas functions.php dengan editor apapun yang Anda sukai. Setelah terbuka, tambahkan kode PHP berikut. Boleh dibagian paling atas (di bawah atau setelah baris kode <?php), ataupun dibagian paling bawah (di atas atau sebelum baris kode ?>).

add_filter( 'rest_authentication_errors', function( $result ) {
    // If a previous authentication check was successful or already returned an error, 
    // pass that result along without further modification.
    if ( true === $result || is_wp_error( $result ) ) {
        return $result;
    }

    // Return a 401 Unauthorized error if the user is not logged in.
    if ( ! is_user_logged_in() ) {
        return new WP_Error(
            'rest_not_logged_in',
            __( 'You are not currently logged in.' ),
            array( 'status' => 401 )
        );
    }

    // Allow the request to proceed if the user is authenticated.
    return $result;
});

Kode di atas merupakan kode PHP yang berfungsi agar mewajibkan otentikasi untuk semua permintaan ke REST API WordPress. Filter ini menggunakan hook rest_authentication_errors untuk memeriksa status login pengguna sebelum memproses permintaan API apa pun.

Berikut adalah tampilan saat Anda mencoba mengakses REST API WordPress tanpa login terlebih dahulu.

Gambar 1: Tampilan saat Anda mencoba mengakses REST API WordPress tanpa login

Penutup

Akhirnya permasalahan pada situs web teman saya dapat diatasi dengan baik. Teman saya senang, saya juga dapat pengalaman yang berharga.

Mohon maaf apabila saya tidak mencantumkan tautan referensi dalam membuat artikel ini. Karena terlalu banyak dan tidak sempat disimpan satu-satu.

Akhir kata, semoga tutorial ini dapat membantu Anda yang sedang menemui masalah serupa di WordPress. Apabila ada kesalahan atau kekurangan, jangan lupa menuliskannya di kolom komentar.

Sampai jumpa di artikel-artikel ChotibulStudio lainnya.