Cara mengaktifkan CORS di nginx

Cara mengaktifkan CORS di nginx

Berbagi Sumber Daya Cross-Origin (CORS) adalah fitur keamanan yang penting untuk aplikasi web. Ini memungkinkan aplikasi web untuk menggunakan sumber daya dari domain lain sambil mencegah akses jahat. Dengan mengaktifkan COR di NGINX, kami dapat memastikan bahwa aplikasi web kami aman dan mereka dapat mengakses sumber daya dari domain lain. Dengan konfigurasi yang tepat, kami dapat memastikan bahwa permintaan berbahaya diblokir dan bahwa aplikasi kami aman.

Di artikel ini, kita akan melihat cara mengaktifkan CORS di nginx.

Cara mengaktifkan CORS di nginx

Nginx adalah server web open-source yang sering digunakan untuk melayani konten statis. Ini juga digunakan untuk 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:

Lokasi / add_header "ACCESS-CONTROL-ALLOW-Origin" *; add_header "Access-Control-Allow-Methods" "Dapatkan, Posting, Opsi"; add_header "akses-control-wallow-headers" "otorisasi";
12345Lokasi / add_header "ACCESS-CONTROL-ALLOW-Origin" *; add_header "Access-Control-Allow-Methods" "Dapatkan, Posting, Opsi"; add_header "akses-control-wallow-headers" "otorisasi";

Petunjuk pertama menambahkan header pada respons yang memungkinkan semua asal untuk mengakses sumber daya. Petunjuk kedua menambahkan header yang menentukan metode mana yang diizinkan. Petunjuk ketiga menambahkan header yang memungkinkan header otorisasi dikirim dengan permintaan.

Selain arahan ini, Anda juga perlu mengkonfigurasi sub URL dalam konfigurasi Nginx Anda. Blok ini akan menentukan URL spesifik mana yang diizinkan diakses melalui CORS. Misalnya:

Lokasi / API / Add_Header "Access-Control-Allow-Origin" *; add_header "Access-Control-Allow-Methods" "Dapatkan, Posting, Opsi"; add_header "akses-control-wallow-headers" "otorisasi";
12345Lokasi / API / Add_Header "Access-Control-Allow-Origin" *; add_header "Access-Control-Allow-Methods" "Dapatkan, Posting, Opsi"; add_header "akses-control-wallow-headers" "otorisasi";

Konfigurasi ini akan memungkinkan asal apa pun untuk mengakses URL yang dimulai dengan /API/. Dimungkinkan juga untuk menentukan domain spesifik yang diizinkan untuk mengakses sumber daya. Misalnya:

Lokasi/API/Add_Header "Access-Control-Allow-Origin" "https: // Contoh.com "; add_header" Access-control-allow-Methods "" Get, Post, Options "; add_header" akses-kontrol-allow-headers "" otorisasi ";
12345Lokasi/API/Add_Header "Access-Control-Allow-Origin" "https: // Contoh.com "; add_header" Access-control-allow-Methods "" Get, Post, Options "; add_header" akses-kontrol-allow-headers "" otorisasi ";

Ini hanya akan mengizinkan permintaan dari contoh.com untuk mengakses URL yang dimulai /API/. Anda dapat mengizinkan beberapa domain dengan mengulangi garis itu dengan domain lain.

Untuk memungkinkan Access-Control-Allow-Origin (CORS) otorisasi hanya untuk file tertentu. Misalnya untuk memungkinkan CORS untuk font hanya menggunakan contoh berikut:

if ($ filename ~* ^.*?\.(eot) | (otf) | (ttf) | (woff) $) add_header access-control-allow-origin *;
123if ($ filename ~* ^.*?\.(eot) | (otf) | (ttf) | (woff) $) add_header access-control-allow-origin *;

Setelah Anda menambahkan arahan konfigurasi yang diperlukan, Anda dapat memulai kembali Nginx dan perubahan akan berlaku.

Konfigurasi Nginx CORS yang terbuka lebar

Berikut adalah file konfigurasi Nginx Cors yang terbuka lebar, yang dapat Anda gunakan dengan server Nginx. Dengan konfigurasi ini, Anda dapat mengaktifkan COR dan parameter lainnya berdasarkan jenis permintaan.

Lokasi / if ($ request_method = 'Options') add_header 'access-control-allow-origin "*'; # # om cookies nom nom # add_header 'access-control-allow-credentials" true'; add_header 'akses-kontrol-allow-methods "dapatkan, posting, opsi'; # # header kustom dan header berbagai browser * harus * baik-baik CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type '; # # Tell Client bahwa info pra-penerbangan ini valid selama 20 hari # add_header 'acces-control-max-age' 1728000; add_header 'tipe konten "Teks/polos charset = utf-8'; add_header 'panjang konten' 0; return 204; if ($ request_method = 'post') add_header 'access-control-allow-origin"** ; Add_header 'akses-kontrol-hal-hal-kredensial "true'; add_header 'akses-kontrol-alhod-methods" dapatkan, posting, opsi'; add_header 'akses-kontrol-wallow-headers "dnt,X-Customheader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Tipe Konten '; if ($ request_method = 'get') add_header 'access-control-allow-origin "*'; add_header 'access-control-allow-credentials" true'; add_header 'akses-kontrol-alow-metode "dapatkan, posting, opsi'; add_header 'akses-kontrol-walow-header" DNT, X-Customheader, Keep-Alive, User-Agent, X-Requested-WITH, IF dimodifikasi -Since, cache-control, tipe konten ';
1234567891011121314151617181920212223242526272829303132333435Lokasi / if ($ request_method = 'options') add_header 'access-control-allow-origin' '*'; # # Om nom nom cookies # add_header 'acces-control-wallow-credentials' 'true'; add_header 'akses-kontrol-alow-metode' 'dapatkan, posting, opsi'; # # Header dan header kustom berbagai browser * harus * baik-baik saja tetapi bukan # add_header 'akses-control-wallow-headers' 'dnt, X-Customheader, Keep-Alive, User-Agent, X-Relip-With, IF-Modified-Since, cache-control, tipe konten '; # # Tell Client bahwa info pra-penerbangan ini valid selama 20 hari # add_header 'acces-control-max-age' 1728000; add_header 'tipe konten' 'teks/charset polos = UTF-8'; add_header 'panjang konten' 0; kembali 204; if ($ request_method = 'Post') add_header 'access-control-allow-origin' '*'; add_header 'akses-kontrol-hal-hal-kredensial' 'benar'; add_header 'akses-kontrol-alow-metode' 'dapatkan, posting, opsi'; add_header 'access-control-Izinkan 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 'akses-kontrol-hal-hal-kredensial' 'benar'; add_header 'akses-kontrol-alow-metode' 'dapatkan, posting, opsi'; Add_header 'akses-kontrol-allow-headers' '' dnt, X-Customheader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type ';

Sumber Daya: https: // michielkalkman.com/snippet/nginx-cors-open-configuration/

Menguji konfigurasi CORS Anda

Setelah Anda mengaktifkan COR di Nginx, Anda harus menguji konfigurasi Anda untuk memastikannya berfungsi dengan benar. Cara termudah untuk melakukan ini adalah dengan menggunakan alat seperti tukang pos atau keriting untuk membuat permintaan ke sumber daya yang ingin Anda uji.

Saat mengajukan permintaan, Anda harus menambahkan header asal. Misalnya, jika Anda menguji URL yang dimulai /API/, Anda harus menambahkan asal header: https: // contoh.com. Anda juga harus menambahkan header Method akses-kontrol-request dengan metode yang ingin Anda uji.

curl -v http: // your_domain.com  

Setelah Anda mengajukan permintaan, Anda harus memeriksa tanggapannya. Jika CORS diaktifkan dengan benar, Anda akan melihat header origin akses-kontrol-kontrol dengan nilai asal yang Anda tentukan dalam permintaan.

Memahami permintaan CORS

Untuk memahami cara kerja CORS, 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 mendapatkan atau memposting permintaan yang tidak memiliki header khusus.

Permintaan preflight adalah permintaan yang lebih kompleks yang memerlukan langkah tambahan. Permintaan ini biasanya memiliki header khusus atau metode selain mendapatkan atau memposting. Sebelum permintaan dapat dikirim, browser akan membuat permintaan awal, yang dikenal sebagai permintaan preflight, untuk menentukan apakah permintaan harus diizinkan.

Jika permintaan preflight diperbolehkan, browser akan mengirim permintaan yang sebenarnya. Jika permintaan preflight tidak diizinkan, browser tidak akan mengirim permintaan yang sebenarnya dan sumber daya tidak akan diakses.

Proses Berbagi Sumber Daya Cross-Origin (CORS)

Kesimpulan

Dalam artikel ini, kami melihat cara mengaktifkan CORS di nginx. Kami melihat cara menambahkan arahan konfigurasi yang diperlukan dan blok lokasi ke konfigurasi nginx kami. Kami juga melihat cara menguji konfigurasi CORS kami dan bagaimana memahami permintaan CORS.

Terima kasih sudah membaca! Jika Anda memiliki pertanyaan atau komentar, silakan tinggalkan di bagian komentar di bawah.