AWS Cloudfront Error : Access Blocked by CORS Policy

Beberapa hari ini saya mencoba melakukan optimasi website klien menggunakan CDN Cloudfront bawaan AWS. Kebetulan menggunakan server AWS Lighsail, sehingga bisa memanfaatkan free tier setahun untuk CDN Cloudfront AWS.

Ketika saya berhasil menggunakan CDN Cloudfront, justru muncul error yang membuat semua icon pada website tidak keluar. Setelah menelusuri pada console, ternyata errornya kurang lebih seperti ini

Access to font at https://cdn.panduaji.com/xxx from panduaji.com origin panduaji.com has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Font yang berada pada server tidak ditampilkan oleh browser sehingga dari pesan eror tersebut saya bisa mencoba mencari tahu apa yang menjadi penyebab Access Blocked by CORS.

Penyebabnya

Jadi, permasalahan ini disebabkan oleh penyajian data yang berasal dari domain berbeda, yang mana ketika orang mengakses panduaji.com, tapi karena menggunakan cdn, gambar yang diambil dari cdn.panduaji.com. Kurang lebih begitu lah. Hal ini diblokir oleh browser dan tidak ditampilkan karena alasan keamanan.

Oleh karena itu, kita perlu melakukan beberapa hal yang berfungsi memberitahukan browser bahwa dalam kasus ini memang kita menggunakan hal tersebut. Itu yang dinamakan oleh CORS (Cross-Origin Resource Sharing). Untuk yang lebih tahu tentang CORS ini mungkin bisa bantu untuk mendeskripsikannya, karena saya takut membuat orang salah paham. Biar lebih paham, ada baiknya baca tentang CORS di sini.

Oh iya, sebelum melakukan ini, pastikan bahwa kamu sudah berhasil menggunakan CDN Cloudfront yak. Kalau belum berhasil sepertinya error seperti ini tidak akan muncul sih. Mungkin next time aku bakalan nulis tentang bagaimana menggunakan CDN Cloudfront AWS untuk wordpress dengan nginx sebagai web server.

Mengatasi No ‘Access-Control-Allow-Origin’ header is present on the requested resource

CORS pada Nginx

Langkah pertama yang harus dilakukan adalah menambahkan CORS pada server Nginx. Kodenya bisa dilihat pada halaman ini. Tinggal copy saja kode yang ada pada halaman tersebut, kemudian paste pada virtual host server nginx, tepatnya berada dalam tag location. Belum paham? Coba cek tulisanku tentang setting nginx

Cek dulu apakah sudah benar penempatan kodenya dengan perintah sudo nginx -t . Kalau sudah nggak ada error, tinggal restart service nginx dengan perintah sudo service nginx restart.

Buat Cache Policies

Langkah pertama yang harusnya dilakukan adalah membuat custom policies. (saya menemukan ini setelah beberapa jam mencoba). Pada CloudFront console, pilih Create Cache Policy. Yang saya isi adalah nama Cache Policynya dan Cache Key Settings. Pada bagian headers pilih Include the following headers. Kemudian Add header pilih yang dibutuhkan oleh error yang muncul di halaman websitemu. Kalau sudah tinggal save aja.

Distribution Behaviors

Pada halaman console cloudfront, buka submenu Distributions kemudian pilih distribution yang mau diedit. Kemudian pilih submenu Behaviors. Pilih path yang mengalami kendala. Dalam kasusku, path tersebut ada pada wp-content. Yaudah berarti pilih yang wp-content/* sehingga ini akan berlaku pada semua konten yang ada dalam wp-content. Tekan Edit

Edit Behaviors

Pada bagian Allowed HTTP Method, defaultnya sih GET, HEAD. Berhubung nggak bisa, akhirnya aku pakai GET, HEAD, OPTIONS. Baru bisa. Setelah itu pada bagian Cache key and origin requests, pilih Cache policy and origin request policy (recommended). Pada Cache Policy, pilih yang sudah dibuat sebelumnya. Sedangkan pada Origin Request policy, saya menggunakan CORS-CustomOrigin. Kemudian simpan!

Access Blocked by CORS SOLVED

Dengan melakukan beberapa langkah di atas, permasalahan icon tidak muncul sudah terselesaikan sehingga kamu bisa menggunakan cloudfront sebagai CDN. Sehingga websitemu bisa lebih cepat diakses dari mana-mana. Apabila ada yang mau bertanya silakan tulis di kolom komentar, mungkin saja saya bisa membantu menjawab.

AWS, CloudFront

Solusi Data Tidak Ditemukan di Database MyPertamina

Panduan daftar BBM Subsidi ini saya tulis untuk teman-teman yang mengalami masalah sama yaitu data tidak ditemukan di database. Dari banyak tutorial yang tersebar di internet, saya belum menemukan solusi yang konkrit. Kali ini saya telah berhasil menemukan solusi konkrit untuk teman-teman yang mengalami permasalahan yang sama. Informasi ini saya peroleh dari orang pertamina, sudah saya praktikkan sendiri dan berhasil. Kenapa Jadi Masalah? Salah satu penyebab data kendaraan tidak ditemukan karena ada perubahan plat nomor mobil yang tadinya hitam sekarang ...

Panduan menggunakan http/2 di nginx vps server

Panduan Menggunakan HTTP2 di Nginx Server

Panduan menggunakan http/2 di nginx server yang saya gunakan untuk mempercepat loading website dan meringankan beban server Sebenarnya apakah ini benar-benar dibutuhkan? Tentu saja jawabannya iya! Terutama apabila kamu termasuk orang yang peduli dengan kecepatan akses website. Penggunaan http2 di server akan sangat membantu konten di website diakses dengan lebih cepat. Hal ini akan memberikan pengalaman yang lebih baik kepada pengunjung website. Secara tidak langsung juga dapat membantu memperbaiki hasil tes core web vitals. Pada kesempatan ini, saya mau berbagi ...

Panduan Ubah Permalink Blogger ke Wordpress dengan Redirect

Memutuskan untuk ubah permalink blogger ke wordpress membutuhkan pertimbangan yang matang, karena berubahnya permalink dapat memberikan dampak yang super duper besar kepada para penunjung blog. Terutama blog yang sudah lama saya kelola, yaitu panduaji.net. Ada banyak pertimbangan sebelum akhirnya saya putuskan untuk mengubah permalink bawaan blogger ke wordpress. Sebelumnya saya memulai blog panduaji.net memang dari blogger, sehingga saya menggunakan permalink bawaan dari blogger. Setelah pindah dari blogger ke wordpress, saya masih menggunakan permalink blogger. Namun sayangnya, menurut analisa saya pribadi ...

Penyebabnya

Mengatasi No ‘Access-Control-Allow-Origin’ header is present on the requested resource

CORS pada Nginx

Buat Cache Policies

Distribution Behaviors

Edit Behaviors

Access Blocked by CORS SOLVED

Tags

Related Post

Solusi Data Tidak Ditemukan di Database MyPertamina

Panduan Menggunakan HTTP2 di Nginx Server

Panduan Ubah Permalink Blogger ke Wordpress dengan Redirect

Leave a Comment Cancel reply

Blog Categories

Navigations

Follow Me