Mengaktifkan CORS di Nginx

Bagi yang telah berusaha mengoptimalkan websitenya pasti minimal sudah mencoba CDN (Content Delivery Network) sehingga setiap konten akan dikirimkan dari lokasi terdekat dan tercepat ke pengunjung. Tapi kasusnya kalau hanya asal diaktifkan kadang tidak muncul kontennya, terutama untuk jenis font yang hanya menjadi simbol kotak – kotak bukannya tulisan atau icon.

Ini disebabkan karena browser menolak memuat filenya karena tidak ada ijin eksplisit dari header filenya apakah bisa dimuat dari lain domain. Resiko keamanan soalnya. Untuk mengatasinya anda perlu menginstruksikan Nginx bahwa file – file tersebut adalah aman digunakan dengan menambahkan CORS (Cross-Origin Resource Sharing). Nah… kalau anda menggunakan web server Nginx maka bisa mencoba solusi berikut.

Silahkan anda akses file konfigurasi virtual host dari situsnya (misal: servernesia.conf), dan didalamnya langsung anda sisipkan kode berikut:

location ~ \.(ttf|ttc|otf|eot|woff|font.css|css)$ {
           add_header Access-Control-Allow-Origin "*";
}

Setelah itu restart Nginx supaya konfigurasi barunya dimuat:

service nginx restart

Selesai, silahkan cek header filenya untuk memastikan sudah berhasil diperbaiki atau cukup reload halaman webnya yang tadi bermasalah.

5 pemikiran pada “Mengaktifkan CORS di Nginx”

  1. Selamat malam mas, lama ga mampir hehehe
    mau tanya lebih detail masalah CORS ini mas, katanya ada yg bilang aman atau ngak aman itu yg dimaksud bagaimana ya? saya ga manggil font.css atau css dari tempat lain tapi terhubung layanan seperti google ads, fb pixel begitu, dan implementasi bagusnya bagaimana ya?

    • Kalau CORS ini lebih ke kebijakan konten/resource statis mas dan biasanya adalah font: ttf, ttc, otf, eot, woff, font.css, css.

      Kalau file JS dipanggil dari tempat lain biasanya tidak termasuk yang dilarang.

      Tapi kode yang saya share diatas memang sangat sederhana, sebenarnya bisa dibuat lebih kompleks lagi dengan sistem whitelist dan tambahan header.

  2. Misal menggunakan font dari google saja apa contohnya seperti berikut mas?

    Access-Control-Allow-Origin: "https://fonts.google.com/";
    • Terbalik mas kalau ingin whitelist. Kita hanya menandai dari domain milik kita sendiri yang mana yang boleh pakai CORS:

      if ($http_origin ~ "^(http://nama_domain.com|http://sub.nama_domain.com)$") {
          add_header "Access-Control-Allow-Origin" $http_origin;
      }

Tinggalkan komentar