Mengatasi CORS issue di Ionic Framework

Mengatasi CORS issue di Ionic Framework – CORS Issue terjadi di Ionic ketika kita menjalankan sebuah project Ionic menggunakan ionic serve atau ionic run dengan live reload kemudian melakukan akses ke sebuah API eksternal. Biasanya akan muncul pesan seperti berikut:

XMLHttpRequest cannot load http://api.ionic.com/endpoint.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8100' is therefore not allowed access.

CORS atau (Cross Origin Resource Sharing) adalah sebuah mekanisme yang memperbolehkan sebuah  resource melakukan http request ke resource lain di luar domain resource asal. Sebagai contoh http://domain-a.com melakukan melakukan permintaan <img> src ke http://domain-b.com/images.jpg maka terjadilah cross-origin HTTP request. Banyak situs sekarang memilih untuk meload resource dari domain lain  baik itu stylesheets, javascript, images, video maupun transfer data yg aman menggunakan Xmlhttprequest.

Kembali pada kasus diatas, ketika kita menjalankan aplikasi Ionic menggunakan browser dengan mengakses url http://localhost:8100 maka seluruh ajax request yang keluar ke host/domain lain menggunakan http://localhost:8100 sebagai origin, oleh karena itu request tersebut memerlukan permintaan preflight CORS untuk melihat apakah origin memiliki akses terhadap API tujuan atau tidak.

Bagaimana mengatasinya?

Sekali lagi perlu kita ketahui bahwa CORS issue hanya terjadi ketika kita menjalankan atau melakukan testing aplisikasi menggunakan ionic serve atau ionic run -l.

Ada 2 cara yang dapat dilakukan untuk mengatasi masalah diatas. Cara yang pertama dan paling mudah adalah dengan mengizinkan setiap request dari origin manapun untuk mengakses API tujuan. Dengan cara menambahkan script berikut pada source API :

header('Access-Control-Allow-Origin: *');

atau untuk lebih aman kita bisa mengganti  wildcard (*) sesuai dengan origin yang diizinkan, seperti berikut :

header('Access-Control-Allow-Origin: http://contoh.com');
header('Access-Control-Allow-Origin: http://contoh2.com');

Namun tentunya kita tidak selalu memiliki akses untuk menambahkan code diatas ke source API tujuan, bisa jadi API tujuan adalah milik orang lain.

Cara kedua dengan melakukan setting proxy server yang telah disediakan Ionic CLI yang cukup mudah dikonfigurasi sebagai alternatif dari cara pertama diatas.

Anggap saja saat ini kita ingin mengakses http://rest.domainku.com/api yang tidak memperbolehkan akses origin dari localhost.

Terdapat dua parameter penting dalam pengaturan proxy server di Ionic; pertama adalah path yang akan digunakan untuk mengakses API melalui Ionic server lokal, dan yg kedua adalah proxyUrl  yang merupakan alamat dari API tujuan.

Buka file ionic.project pada direktori project Ionic. kemudia tambahkan parameter proxy pada baris kode seperti dibawah:

{
  "name": "coba-proxy",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://rest.domainku.com/api"
    }
  ]
}

Maka ketika kita menjalankan ionic serve atau ionic run, kita cukup melakukan request ke path http://localhost:8080/api dan secara otomatis proxy server akan mengarahkan request kita ke http://rest.domainku.com/api, dengan demikian CORS tidak diperlukan lagi.

Sebagai catatan, cara diatas hanya digunakan saat proses development dengan browser, maka sebelum mem-build aplikasi menjadi file .apk pastikan untuk mengembalikan pengaturan seperti semula atau bisa menggunakan cara yg lebih tricky yaitu dengan membuat url switcher dengan Gulp menggunakan module replace.

Demikian share saya tentang cara mengatasi CORS issue di Ionic Framework. Semoga Bermanfaat.

Iklan

Satu pemikiran pada “Mengatasi CORS issue di Ionic Framework

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s