Kesalahan CORS
Artikel ini memberikan deskripsi singkat terkait kesalahan Cross-Reference Origin Sharing (CORS) yang dapat muncul pada permintaan Anda melalui aplikasi.
Apa itu CORS?
CORS adalah standar yang memungkinkan interaksi dengan sumber daya dari asal yang berbeda. Berdasarkan kebijakan asal yang sama (mekanisme keamanan) untuk mencegah bagaimana dokumen atau skrip yang dimuat dari satu sumber dapat berinteraksi dengan sumber daya dari sumber lain. Jika CORS tidak dikonfigurasi, Anda dapat melihat kesalahan pada browser konsol yang menunjukkan bahwa permintaan diblokir:“Permintaan Lintas Asal Diblokir:Kebijakan Asal yang Sama melarang membaca sumber daya jarak jauh di $somesite ”.
Kapan saya tahu jika permintaan berasal dari asal yang sama? Sederhana saja jika kedua URL memiliki protokol, host, dan port yang sama. Ini adalah contoh kepatuhan terhadap same-origin-policy https://localhost:80/index.html meminta data ke https://localhost:80/api/user/75214Ini contoh ketidakpatuhan dengan same-origin-policy https://localhost:80/index.html meminta data ke https://example.com:80/api/user/75214
Kesalahan seperti apa yang bisa muncul?
Saat kesalahan CORS ditampilkan di konsol, sebagian teks adalah alasan pesan yang menunjukkan apa yang salah. Daftar berikut menjelaskan kesalahan CORS yang paling umum:
-
CORS DINONAKTIFKAN
Alasan:Permintaan telah dicoba tetapi CORS dinonaktifkan di browser Anda. Solusi:Anda perlu menavigasi ke browser pengaturan dan menyetel opsi content.cors.disable false. -
Permintaan CORS tidak berhasil
Alasan:Permintaan HTTP gagal untuk tingkat jaringan atau protokol. Dalam beberapa kasus disebabkan karena plugin atau ekstensi atau karena origin kedua memiliki sertifikat yang tidak valid. Solusi:Coba lagi permintaan dan nonaktifkan plugin dan ekstensi. Periksa apakah asal kedua tersedia dan memiliki sertifikat yang valid. -
Header CORS 'Origin' tidak dapat ditambahkan
Alasan:Peramban web tidak dapat menambahkan tajuk Asal yang diperlukan ke permintaan HTTP. Solusi:Verifikasi jika skrip tidak berjalan dengan hak istimewa yang ditingkatkan. -
CORS meminta pengalihan eksternal tidak diizinkan
Alasan:Permintaan dialihkan ke asal lain (bukan yang asli). Solusi:Perbarui URL pada kode server Anda. -
CORS permintaan bukan HTTP
Alasan:Permintaan tidak dialihkan ke URL HTTP yang valid, misalnya, file:/// URL.Solusi:Periksa URL di kode server Anda. -
Header CORS 'Access-Control-Allow-Origin' hilang
Alasan:Respons tidak memiliki Acces-Control-Allow-Origin header.Solution:Tambahkan asal ke header permintaan. Access-Control-Allow-Origin:https://rackspace.com atau Anda dapat menggunakan * untuk mengizinkan akses dari situs mana pun. -
Header CORS 'Access-Control-Allow-Origin' tidak cocok dengan 'xyz'
Alasan:Respons mencakup lebih dari satu Access-Control-Allow-Origin .Solution:Pastikan permintaan CORS dikonfigurasi untuk menyertakan Origin Anda di Access-Control-Allow-Origin header dan hanya memiliki Access-Control-Allow-Origin tajuk. -
Kredensial tidak didukung jika tajuk CORS 'Access-Control-Allow-Origin' adalah '*'
Alasan:Permintaan CORS dicoba dengan set bendera kredensial, tetapi server dikonfigurasi menggunakan wildcard ("*") sebagai nilai Access-Control-Allow-Origin, yang tidak mengizinkan penggunaan kredensial.Solusi:Pastikan nilai tanda kredensial salah saat mengeluarkan permintaan CORS Anda.XMLHttpRequest menyetel nilai withCredentials ke false.Server-sent events pastikan EventSource.withCredentials salah (ini adalah nilai default).Jika menggunakan Fetch API, pastikan Request .credentials adalah “dihilangkan”. -
Tidak menemukan metode di header CORS 'Access-Control-Allow-Methods'
Alasan:Metode permintaan HTTP tidak termasuk dalam daftar Access-Control-Allow-Methods kepala.
Solusi:Konfigurasikan header dengan metode yang diperlukan:Access-Control-Allow-Methods:GET,HEAD,POST -
Diharapkan 'true' di header CORS 'Access-Control-Allow-Credentials'
Alasan:Saat Access-Control-Allow-Credentials . server nilai header tidak disetel ke true untuk mengaktifkan penggunaannya.Solusi:Di sisi klien, revisi konfigurasi berikut:XMLHttpRequest menyetel nilai withCredentials ke false.Acara yang dikirim server pastikan EventSource.withCredentials salah (ini adalah nilai default). Jika menggunakan Fetch API, pastikan Request.credentials “dihilangkan”. Untuk menghilangkan kesalahan ini pada sisi server, set Access-Control-Allow-Credentials nilai menjadi benar. -
Saluran awal CORS tidak berhasil
Alasan:Permintaan CORS membutuhkan dan preflight dan preflighting tidak dapat dilakukan. Permintaan lintas situs sudah melakukan preflight. Permintaan preflight mengalami kesalahan jaringan. Solusi:Pastikan kode Anda hanya preflight sekali per koneksi. -
Token 'xyz' tidak valid di header CORS 'Access-Control-Allow-Methods'
Alasan:Ini terjadi ketika respons terhadap CORS menyertakan Access-Control-Allow-Methods dan setidaknya satu metode header tidak valid. Solusi:Pastikan semua metode di Access-Control-Allow-Methods adalah metode HTTP yang valid. -
token tidak valid 'xyz' di header CORS 'Access-Control-Allow-Headers'
Alasan:Ini terjadi ketika respons terhadap CORS menyertakan Access-Control-Allow-Methods dan setidaknya satu nama header tidak valid. Solusi:Pastikan semua nama header di Access-Control-Allow-Headers tidak valid atau tidak dikenal. -
Token 'xyz' tidak ada di header CORS 'Access-Control-Allow-Headers ' dari saluran pra-penerbangan CORS
Alasan:Kesalahan ini terjadi saat mencoba melakukan preflight header yang tidak termasuk dalam daftar yang ditentukan oleh Access-Control-Allow-Headers header.Solution:Server perlu diperbarui sehingga memungkinkan header yang ditunjukkan atau menghindarinya. -
Beberapa header CORS 'Access-Control-Allow-Origin' tidak diizinkan
Alasan:Lebih dari satu Access-Control-Allow-Origin header dikirim oleh server.Solusi:Verifikasi di server Anda bahwa Anda tidak dapat mengirim daftar asal karena browser hanya menerima satu origin atau null.
Kesimpulan
Artikel ini menunjukkan berbagai jenis kesalahan dan kemungkinan solusi yang bisa Anda dapatkan saat menggunakan CORS dalam server web Anda.