Cara allow CORS origin di hosting

1703 September 1, 2022

Apa itu CORS ?

Cross-Origin Resource Sharing (CORS) adalah mekanisme berdasarkan header HTTP yang memungkinkan browser mengidentifikasi request mana yang berasal dari daftar domain yang diizinkan, sekaligus mem-filter request yang tidak diketahui.

Browser membuat request “preflight” ke server yang menghosting cross-origin resource untuk memeriksa apakah server akan mengizinkan request yang sebenarnya. Dalam preflight itu, browser mengirimkan informasi tentang metode HTTP dan header yang akan digunakan nanti dalam request yang sebenarnya.

Contoh kasus

Fetching data dari situs dan API yang menerapkan kebijakan CORS tanpa header yang tepat dapat menyebabkan pesan error “Access to XMLHttpRequest has been blocked by CORS policy” di Chrome DevTools.

CORS Policy di block di browser

Gambar : Pesan error “Access to XMLHttpRequest has been blocked by CORS policy”

Solusi

Umumnya kita bisa membypass CORS policy melalui client-side atau browser, pada Chrome biasanya cukup menggunakan plugin. Namun ini tidak efektif untuk semua user yang tidak menggunakan metode serupa, dikarenakan secara default mayoritas modern browser sudah memblock CORS origin. Solusinya, kita bisa meng-allow CORS Origin dari server-side atau di hosting.

Untuk allow CORS origin di hosting, cukup menggunakan rule yang ditempatkan dalam file .htaccess dalam direktori instalasi website anda.

Silahkan tambahkan script rule berikut :

Metode 1 : Allow “any origin” atau wildcard 

<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
</IfModule>

Metode 2 : Allow request hanya dari namawebsite.com

<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin : http://namawebsite.com
</IfModule>

 

Kesimpulan

Jika Anda dikemudian hari mengalami problem dengan CORS, ingatlah untuk menanganinya terlebih dahulu di sisi server.  Anda dapat menggunakan plugin chrome seperti “CORS Unblock” untuk mengatasi ini pada masa pengembangan. Namun, ketahuilah bahwa sebagian besar trik di “client-side” tidak akan efektif ketika sudah masuk tahapan production.