Setelah mengintegrasikan situs ke Edge Security Accelerator (ESA), halaman utama mungkin berhasil dimuat, tetapi tata letaknya rusak, gambar tidak ditampilkan, atau terjadi error JavaScript. Penyebab umumnya meliputi ketidaksesuaian port atau protokol back-to-origin, aturan Perlindungan hotlink yang memblokir permintaan dari Nama domain Anda sendiri, versi cache aset statis yang sudah usang, atau aturan kustom WAF yang memblokir permintaan aset statis. Topik ini menjelaskan penyebab umum kegagalan pemuatan aset statis beserta langkah-langkah troubleshooting-nya.
Gejala
Halaman utama berhasil dimuat, tetapi tata letaknya rusak, gambar tidak ditampilkan, atau terjadi error JavaScript.
Penyebab dan solusi
Bagian berikut menjelaskan penyebab paling umum. Sebelum mengubah konfigurasi apa pun, pastikan kondisi yang dijelaskan di setiap bagian berlaku untuk situs Anda.
Ketidaksesuaian port/protokol origin
Jika server origin Anda menyajikan aset statis (CSS, JavaScript, dan gambar) melalui HTTPS pada port 443, tetapi ESA secara default melakukan permintaan back-to-origin melalui HTTP pada port 80, aset statis akan gagal dimuat. Di panel navigasi sebelah kiri, pilih Rules > Origin Rules. Atur port back-to-origin menjadi 443 dan protokol menjadi HTTPS.
Aturan Perlindungan hotlink memblokir aset statis
Di panel navigasi sebelah kiri, pilih Security > WAF. Periksa apakah aturan Perlindungan hotlink memblokir permintaan aset statis dari Nama domain Anda sendiri.
Tambahkan Nama domain Anda sendiri ke daftar allowlist aturan Perlindungan hotlink tersebut.
Versi aset statis yang di-cache sudah usang
Masuk ke Konsol ESA. Di halaman Websites, klik situs target di kolom Name. Di panel navigasi sebelah kiri, pilih Cache > Purge Cache.
Pilih metode purge Directory dan kirimkan domain root (misalnya,
https://www.example.com/).Bersihkan cache browser lokal dan akses kembali situs tersebut.
ESAAturan kustom WAF blokir permintaan aset statis
Di panel navigasi sebelah kiri, pilih Security > WAF. Periksa apakah ada aturan kustom WAF yang secara keliru memblokir permintaan aset statis seperti .js, .css, dan .png.
Verifikasi perbaikan
Setelah menyelesaikan langkah-langkah troubleshooting, bersihkan cache browser dan akses kembali situs tersebut. Di F12 > Network, verifikasi bahwa permintaan semua aset statis (CSS, JavaScript, dan gambar) mengembalikan 200 OK. Jika aset statis masih gagal dimuat setelah Anda menyingkirkan semua penyebab di atas, kirimkan Tiket ke dukungan teknis Alibaba Cloud.