Archive

Browsing

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