Blogger Jateng
Home / Tutorial

Kesalahan Umum CORS dan Cara Memperbaikinya

Cross-Origin Resource Sharing (CORS) adalah fitur keamanan yang diimplementasikan oleh browser untuk mencegah situs web berbahaya mengakses sumber daya dan data dari sumber lain. Secara sederhana, fitur ini memungkinkan halaman web untuk meminta sumber daya dari domain atau server yang berbeda dengan aman. Meskipun CORS merupakan mekanisme keamanan yang penting, CORS juga dapat menjadi sumber frustrasi bagi para pengembang, terutama ketika mereka menemukan kesalahan yang mencegah aplikasi mereka berfungsi dengan baik.

Pada artikel ini, kita akan membahas beberapa kesalahan CORS yang paling umum yang mungkin ditemui oleh para pengembang dan cara mengatasinya.

sumber: carlosgonzalezgurrea.es

1. Kebijakan CORS Diblokir: Tidak ada Header 'Akses-Kontrol-Izinkan-Asal'

Kesalahan CORS yang umum terjadi adalah ketika browser mengidentifikasi bahwa server tidak memberikan header yang tepat untuk mengaktifkan permintaan lintas asal. Biasanya pesannya terlihat seperti:

Access to XMLHttpRequest at 'http://example.com/data' from origin 'http://mywebsite.com' has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Bagaimana cara memperbaikinya:

Berikut ini tampilannya: Untuk mengatasi masalah ini, server yang menghosting sumber daya harus mengizinkan CORS pada header responsnya. Header penting yang perlu diperhatikan di sini adalah Access-Control-Allow-Origin.  Anda dapat mengonfigurasi server untuk menyertakan header ini dengan nilai * (untuk mengizinkan semua asal) atau menentukan domain tertentu yang diizinkan untuk mengakses sumber daya.

Sebagai contoh, di Node.js dengan Express:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

Solusi ini memastikan bahwa permintaan lintas asal diperbolehkan.

2. Permintaan Preflight CORS Gagal

Jika browser mengidentifikasi permintaan lintas asal, browser akan mengirimkan permintaan pra-penerbangan CORS sebelum melakukan permintaan yang sebenarnya. Hal ini terjadi jika metode permintaan bukan merupakan metode HTTP sederhana (misalnya, permintaan non-HEAD) atau kumpulan header yang dikirim tidak dianggap sederhana. Jika permintaan preflight gagal, Anda akan melihat kesalahan seperti:

Access to fetch at 'http://example.com/api' from origin 'http://mywebsite.com' has been blocked by CORS policy: Response to preflight request doesn’t pass access control check.

Bagaimana cara memperbaikinya:

Permintaan pra-penerbangan dibuat dengan mengirimkan permintaan OPTIONS, yang harus ditanggapi oleh server dengan tajuk CORS yang benar. Kesalahan ini berarti server tidak diatur untuk merespons permintaan preflight ini dengan benar.

Perbaiki hal ini dengan memastikan bahwa server mendukung OPTIONS dan menentukan header CORS yang diperlukan dalam respons. Selain header Access-Control-Allow-Origin, ada beberapa header lain yang mungkin harus Anda sertakan:
  • Kontrol-Akses-Mengizinkan-Metode: Menentukan metode HTTP yang diizinkan (misalnya, GET, POST, PUT).
  • Access-Control-Allow-Headers: Mencantumkan header yang dapat digunakan dalam permintaan yang sebenarnya.
Sebagai contoh:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

3. Masalah CORS: Bidang Header Permintaan 'Otorisasi' Tidak Ditemukan di Akses-Kontrol-Izinkan-Header

Saat Anda mengirim permintaan HTTP dengan header khusus, seperti Otorisasi, browser melakukan pemeriksaan awal. Jika server tidak secara eksplisit mengizinkan header ini, Anda mungkin akan menemukan kesalahan berikut:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Bagaimana cara memperbaikinya:

Untuk memperbaikinya, Anda perlu mengonfigurasi server Anda untuk menyertakan Otorisasi dalam respons pra-penerbangan ... Hal ini dapat dilakukan dengan mengatur header Access-Control-Allow-Headers untuk menyertakan Otorisasi: 

 app.use((req, res, next) => {
  res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type');
  next();
});

4. Kesalahan CORS: Mode Kredensial Tidak Diizinkan

Anda mungkin juga ingin mengirim permintaan lintas asal dengan kredensial seperti cookie atau informasi autentikasi HTTP. Jika server tidak diatur untuk menerima permintaan semacam ini, Anda mungkin akan melihat kesalahan seperti berikut ini:

CORS policy: Credentials flag is present, but the CORS header ‘Access-Control-Allow-Origin’ is not set to ‘*’.

Bagaimana cara memperbaikinya:

Untuk memperbaikinya, server harus mengembalikan header Access-Control-Allow-Credentials, dan tidak boleh menyetel header Access-Control-Allow-Origin ke *. Sebaliknya, ia harus menentukan asal yang tepat yang diizinkan untuk mengirim permintaan dengan kredensial.

Sebagai contoh:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://mywebsite.com');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
});

5. Metode Kesalahan CORS Tidak Diizinkan

Kesalahan khusus ini berarti bahwa metode HTTP yang digunakan (seperti PUT, DELETE) tidak diizinkan menurut kebijakan CORS server. Pesan kesalahan bisa jadi seperti berikut ini:

Access to XMLHttpRequest at 'http://example.com/data' from origin 'http://mywebsite.com' has been blocked by CORS policy: Method PUT is not allowed.

Cara memperbaikinya:

Konfirmasikan bahwa metode HTTP tertentu yang Anda gunakan diaktifkan di server. Bagaimana Anda menyalin header Access-Control-Allow-Methods dan menambahkan metode yang diperlukan?

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  next();
});

Kesimpulan

Kesalahan CORS adalah hal yang umum terjadi ketika berurusan dengan permintaan lintas asal, tetapi biasanya mudah diperbaiki setelah Anda memahami masalah spesifiknya. Dengan mengonfigurasi server untuk menyertakan header yang sesuai untuk jenis permintaan yang dibuat, pengembang dapat memastikan bahwa aplikasi mereka dapat berinteraksi dengan aman di berbagai domain. Memahami CORS dan cara mengonfigurasinya dengan benar akan menghemat waktu dan rasa frustrasi selama pengembangan.