Cross-Origin Resource Sharing (CORS) adalah fitur keamanan penting untuk aplikasi web. Itu memungkinkan aplikasi web untuk menggunakan sumber daya dari domain lain sambil mencegah akses berbahaya. Pada artikel ini, kita akan melihat cara mengaktifkan CORS di Nginx. NbspEnable CORS di Nginx
Nginx adalah server web sumber terbuka yang sering digunakan untuk menyajikan konten statis. Itu juga digunakan untuk mem-proxy permintaan ke server web lain, seperti Apache. Untuk mengaktifkan CORS di Nginx, kita perlu menambahkan beberapa arahan konfigurasi.
Konfigurasi sederhana untuk mengaktifkan CORS di Nginx terlihat seperti ini:
add_header "Access-Control-Allow-Origin" *; add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS"; add_header "Access-Control-Allow-Headers" "Otorisasi";123 add_header "Access-Control-Allow-Origin" *; add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS"; add_header "Access-Control-Allow-Headers" "Otorisasi";
Direktif pertama menambahkan header ke respons yang memungkinkan semua asal mengakses sumber daya. Arahan kedua menambahkan header yang menentukan metode mana yang diizinkan. Arahan ketiga menambahkan header yang memungkinkan header otorisasi dikirim dengan permintaan.
Selain arahan ini, Anda juga perlu mengonfigurasi Sub URL dalam konfigurasi Nginx Anda. Blok ini akan menentukan URL mana yang diizinkan untuk diakses melalui CORS. Misalnya: lokasi
/api/ { add_header "Access-Control-Allow-Origin" *; add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS"; add_header "Access-Control-Allow-Headers" "Otorisasi"; }12345lokasi /api/ { add_header "Access-Control-Allow-Origin" *; add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS"; add_header "Access-Control-Allow-Headers" "Otorisasi"; }
Konfigurasi ini akan mengizinkan asal mana pun untuk mengakses URL yang dimulai dengan /api/. Dimungkinkan juga untuk menentukan domain tertentu yang diizinkan untuk mengakses sumber daya. Misalnya: lokasi
/api/ { add_header "Access-Control-Allow-Origin" "https://example.com"; add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS"; add_header "Access-Control-Allow-Headers" "Otorisasi"; }12345lokasi /api/ { add_header "Access-Control-Allow-Origin" "https://example.com"; add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS"; add_header "Access-Control-Allow-Headers" "Otorisasi"; }
Ini hanya akan mengizinkan permintaan dari example.com untuk mengakses URL yang dimulai dengan /api/.
Untuk mengizinkan otorisasi Access-Control-Allow-Origin (CORS) hanya untuk file tertentu. Misalnya untuk mengizinkan CORS untuk font hanya menggunakan contoh berikut:
if ($filename ~* ^.*?.(eot)|(otf)|(ttf)|(woff)$){ add_header Access-Control-Allow -Asal *; }123if ($filename ~* ^.*?.(eot)|(otf)|(ttf)|(woff)$){ add_header Access-Control-Allow-Origin *;}
Setelah Anda menambahkan arahan konfigurasi yang diperlukan , Anda dapat memulai ulang Nginx dan perubahan akan berlaku.
Buka lebar konfigurasi nginx CORS
Berikut adalah file konfigurasi Nginx CORS yang terbuka lebar, Anda dapat menggunakan dengan server Nginx.
location / { if ($request_method = `OPTIONS`) { add_header ` Access-Control-Allow-Origin` `*`; # # Om nom nom cookies # add_header `Access-Control-Allow-Credentials` `true`; add_header `Access-Control-Allow-Methods` `GET, POST, OPTIONS`; # # Header dan header khusus berbagai browser *harus* boleh digunakan tetapi tidak # add_header `Access-Control-Allow-Headers` `DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With, Jika-Dimodifikasi-Sejak,Kontrol-Cache,Tipe-Konten`; # # Beri tahu klien bahwa info pra-penerbangan ini berlaku selama 20 hari # add_header `Access-Control-Max-Age` 1728000; add_header `Content-Type` `text/plain charset=UTF-8`; add_header `Panjang Konten` 0; kembali 204; } if ($request_method = `POST`) { add_header `Access-Control-Allow-Origin` `*`; add_header `Access-Control-Allow-Credentials` `true`; add_header `Access-Control-Allow-Methods` `GET, POST, OPTIONS`; add_header `Access-Control-Allow-Headers` `DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type`; } if ($request_method = `GET`) { add_header `Access-Control-Allow-Origin` `*`; add_header `Access-Control-Allow-Credentials` `true`; add_header `Access-Control-Allow-Methods` `GET, POST, OPTIONS`; add_header `Access-Control-Allow-Headers` `DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type`; } }1234567891011121314151617181920212223242526272829303132333435location / { if ($request_method = `OPTIONS`) { add_header `Access-Control-Allow-Origin` `*`; # # Cookie om nom nom # add_header `Access-Control-Allow-Credentials` `true`; add_header `Access-Control-Allow-Methods` `GET, POST, OPTIONS`; # # Header dan header khusus berbagai browser *harus* boleh digunakan tetapi tidak # add_header `Access-Control-Allow-Headers` `DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With, Jika-Dimodifikasi-Sejak,Kontrol-Cache,Tipe-Konten`; # # Beri tahu klien bahwa info sebelum penerbangan ini berlaku selama 20 hari # add_header `Access-Control-Max-Age` 1728000; add_header `Content-Type` `text/plain charset=UTF-8`; add_header `Panjang Konten` 0; kembali 204; } if ($request_method = `POST`) { add_header `Access-Control-Allow-Origin` `*`; add_header `Access-Control-Allow-Credentials` `true`; add_header `Access-Control-Allow-Methods` `GET, POST, OPTIONS`; add_header `Access-Control-Allow-Headers` `DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type`; } if ($request_method = `GET`) { add_header `Access-Control-Allow-Origin` `*`; add_header `Access-Control-Allow-Credentials` `true`; add_header `Access-Control-Allow-Methods` `GET, POST, OPTIONS`; add_header `Access-Control-Allow-Headers` `DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type`; }}
Resource: https://michielkalkman.com/snippets/nginx-cors-open-configuration/
Menguji Konfigurasi CORS Anda
Setelah Anda mengaktifkan CORS di Nginx, Anda harus menguji konfigurasi Anda untuk memastikannya berfungsi dengan baik. Cara termudah untuk melakukannya adalah dengan menggunakan alat seperti Postman atau curl untuk membuat permintaan ke sumber daya yang ingin Anda uji.
Saat membuat permintaan, Anda harus menambahkan tajuk Origin. Misalnya, jika Anda menguji URL yang diawali dengan /api/, Anda harus menambahkan tajuk Origin: https://example.com. Anda juga harus menambahkan header Access-Control-Request-Method dengan metode yang ingin Anda uji.
curl -v http://your_domain.com
Setelah membuat permintaan, Anda harus memeriksa tanggapan. Jika CORS diaktifkan dengan benar, Anda akan melihat header Access-Control-Allow-Origin dengan nilai asal yang Anda tentukan di request.
Memahami Permintaan CORS
Dalam rangka untuk memahami cara kerja CORS, itu penting untuk memahami berbagai jenis permintaan yang dapat dikirim. Ada dua jenis permintaan: permintaan sederhana dan permintaan preflight.
Permintaan sederhana adalah permintaan yang tidak memerlukan pemeriksaan preflight. Permintaan ini biasanya adalah permintaan GET atau POST yang tidak memiliki header khusus. Permintaan
Preflight adalah permintaan yang lebih kompleks yang memerlukan langkah tambahan. Permintaan ini biasanya memiliki tajuk khusus atau metode selain GET atau POST. Sebelum permintaan dapat dikirim, browser akan membuat permintaan awal, yang dikenal sebagai permintaan preflight, untuk menentukan apakah permintaan tersebut harus diizinkan.
Jika permintaan preflight diizinkan, browser kemudian akan mengirimkan permintaan yang sebenarnya. Jika permintaan preflight tidak diizinkan, browser tidak akan mengirim permintaan aktual dan sumber daya tidak akan diakses.
Cross-Origin Resource Sharing (CORS) ProcessConclusionDalam artikel ini, kami melihat cara mengaktifkan CORS di Nginx. Kami melihat cara menambahkan arahan konfigurasi dan blok lokasi yang diperlukan ke konfigurasi Nginx kami. Kami juga melihat cara menguji konfigurasi CORS kami dan cara memahami permintaan CORS.
Dengan mengaktifkan CORS di Nginx, kami dapat memastikan bahwa aplikasi web kami aman dan dapat mengakses sumber daya dari domain lain. Dengan konfigurasi yang tepat, kami dapat memastikan bahwa permintaan berbahaya diblokir dan aplikasi kami aman.
Terima kasih telah membaca! Jika Anda memiliki pertanyaan atau komentar, silakan tinggalkan di bagian komentar di bawah.
Referensi tecadmin.com
