Cara Ionic Handle CORS

Penasaran, saya coba buat crud sederhana. Menggunakan Codeiniter sebagai backend nya, saya coba akses ionic dengan $htpp lewat angular. Hasilnya….selalu ketemu dengan CORS.

Bagaimana untuk menghindari CORS disini? Ternyata Ionic sudah buat handlenya. Artikel nya ada di link ini http://blog.ionic.io/handling-cors-issues-in-ionic/.

Jika pada local codeigniter kita buat url misalnya http://localhost/nama_project_ci/nama_controller sebagai backend yang mengeluarkan json untuk ditangkep oleh angular. Buka pada folder project ionic kita, lalu cari file ionic.project.

Setelah didapat tambahkan saja proxyurl untuk handle cors seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
{
  "name": "ionictest",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://localhost/ionic_api/"
    }
  ]
}

pada kode diatas, proxyUrl adalah project codeigniter kita sebagai backend, lalu ‘path’ saya sebut sebagai alias untuk pasang di angularjs si ionic. Jadi pemanggilan $http angularnya seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$scope.init = function() {
    $http({
      method: 'get',
      url: '/api',
      responseType: 'json'
    }).success(function(data, status, headers, config) {
      console.log(config);
      console.log(headers);
      console.log(status);
      console.log(data);
      $scope.contacts = data;
    }).error(function(data, status, headers, config){
      console.log(config);
      console.log(headers);
      console.log(status);
      console.log("Error:" + data);
    });
  }

Kalo dilihat diatas, ada url dimana url itu adalah alias dari proxies yang kita setting diatas sebelumnya.

Kalau sudah diganti proxies nya, jangan lupa di matiin dulu ionic serve nya, lalu jalanin lagi karena ga bisa langsung ke ganti.

Semoga bisa jadi tambahan informasi 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.