Mengatasi Content Security Policy (CSP) blocked the loading of a resource

Error "Content Security Policy (CSP) blocked the loading of a resource" terjadi karena browser membatasi akses ke sumber daya eksternal atau permintaan AJAX karena aturan keamanan yang diterapkan di server atau header halaman.

Cara Mengatasinya

Berikut beberapa solusi yang bisa dicoba:

1. Pastikan Fetch API Menggunakan URL yang Benar

• Jika search_barang.php ada di server yang sama, gunakan relatif path seperti ini:

  fetch('search_barang.php?q=' + encodeURIComponent(keyword))
  

• Jika search_barang.php ada di domain lain, maka bisa terblokir oleh CSP.

---

2. Cek dan Edit Content Security Policy (CSP) di Server

Jika menggunakan Apache, buka atau edit file .htaccess di root proyek:

Header set Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' data:;"

Jika menggunakan Nginx, edit konfigurasi nginx.conf:

add_header Content-Security-Policy "default-src 'self' data: 'unsafe-inline' 'unsafe-eval';";

Restart server setelah mengubah konfigurasi.

---

3. Pastikan Server Mengizinkan CORS (Cross-Origin Resource Sharing)

Buka file search_barang.php, lalu tambahkan di bagian paling atas:

<?php
header('Access-Control-Allow-Origin: *'); // Izinkan semua domain
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type');
header('Content-Type: application/json');

Jika server hanya boleh menerima permintaan dari domain tertentu, ubah * menjadi domain yang diperbolehkan:

header('Access-Control-Allow-Origin: https://contoh.com');

---

4. Pastikan Halaman Tidak Dijalankan Secara Langsung dari File Lokal

Jika menjalankan index.html langsung dari file lokal (file:///C:/...), maka AJAX tidak akan berjalan karena kebijakan keamanan browser.
Solusinya: Gunakan server lokal seperti XAMPP, WAMP, atau Live Server di VS Code.

• Jika menggunakan XAMPP, pindahkan file ke htdocs dan akses melalui http://localhost/pos/index.html.
• Jika menggunakan Live Server di VS Code, klik kanan file index.html → Open with Live Server.

---

Coba langkah-langkah di atas, lalu cek lagi di Console Browser (F12 → tab Console). Kalau masih ada error, beri tahu saya detailnya, nanti saya bantu lagi!

Posted in: MYSQL