Permasalahan Cross-Origin Request (CORS) Blocked di web sering kali ditemui pada web wordpress yang menggunakan subdomain untuk content statis. bagaimana cara mengatasi masalah ini di web server nginx?

Misal domain utamanya adalah humayraa.com dan content static anda tempatkan di subdomain static.humayraa.com. Karena ada perbedaan domain utama dengan subdomain untuk content statis (gambar, CSS dan font) maka biasanya akan timbul masalah font tidak muncul di web dan layout web berantakan karena CSS tidak di load. Saat dilakukan inspect element, di bagian bawah muncul error berikut:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.humayraa.com/plugins/sneeit-framework/fonts/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

untuk mengatasi masalah ini, cukup dengan menambahkan header “Access-Control-Allow-Origin”.

Cara Menambahkan header “Access-Control-Allow-Origin” di nginx

Jika web server anda menggunakan NGINX, edit /etc/nginx/sites-enabled/static.humayraa.com (sesuaikan nama file virtual host di nginx server anda), kemudian tambahkan:

location ~* \.(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

setelah itu restart nginx dengan perintah:

service nginx restart

Sumber gambar: https://www.keycdn.com/support/cors
Sumber artikel: https://www.bestariwebhost.com/cara-menambahkan-header-access-control-allow-origin-di-nginx/

Semoga bermanfaat

Author

Saya adalah seorang Freelance Web Developer di Bestariweb Studio, dan System administrator sekaligus pemilik Bestariweb Hosting, Tinggal di Tangerang, Banten, Indonesia.

Write A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.