Memperbaiki Blocked by CORS Policy di Ionic - Mari Belajar Coding

Rabu, 13 Maret 2019

Memperbaiki Blocked by CORS Policy di Ionic

Memperbaiki Blocked by CORS Policy di Ionic

Selamat datang di blog Mari belajar koding. Buat teman-teman yang mengembangkan aplikasi mobile dengan framework Ionic tentu familiar dengan module http untuk permintaan data menggunakan api. Tetapi ada beberapa kendala saat kita melakukan request data, muncul pesan eror has been blocked by CORS policy. 

Apa itu CORS?
CORS adalah metode untuk mencegah klien meminta layanan dari host lain. Ini dilakukan untuk alasan keamanan. 

Mungkin teman-teman juga mengalami masalah pesan eror ini. Sedikit cerita, saya juga mengalami pesan error ini saat menggunakan header untuk otorisasi (Authorization) di projek aplikasi yang saya buat. Sebelumnya,  pertukaran data masih bisa jalan tanpa memunculkan pesan eror ketika header hanya menggunakan content type application/json. Ketika menambahkan Authorization untuk keamanan pertukaran datanya disitu muncul pesan eror. Sudah berbagai forum saya baca untuk memperbaikinya tapi masih aja has been blocked. Mungkin juga saya aja yang kurang memahaminya. Setelah berjam-jam akhirnya nemu juga blog luar negeri yang membahas. Oke langung saja cara memperbaiki blocked by cors policy di Ionic.

Memperbaiki Blocked by CORS Policy di Ionic

1. Install plugin http
$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install --save @ionic-native/http@4

2.Tambahkan import HTTP di app.module.ts
import { HTTP } from '@ionic-native/http';

3.Tambahkan http di prodiver.
providers: [
    StatusBar,
    SplashScreen,
    ScreenOrientation,
    
    HTTP,

    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthServiceProvider
  ]

Contoh sederhana untuk menggunakannya:
import { HTTP } from '@ionic-native/http';

constructor(private http: HTTP) {}

...

this.http.get('http://ionic.io', {}, {})
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });


Contoh jika menggunakannya di provider.ts
import { Injectable } from '@angular/core';
//import {Http, Headers, RequestOptions } from '@angular/http';
import { HTTP } from '@ionic-native/http';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthServiceProvider {
 apiUrl: any;

  constructor( private http: HTTP) { 

      this.apiUrl='http://10.0.2.2/';
  }

  postData(credentials, type) {
    return new Promise((resolve, reject) => {     
      let headers = {
        'Content-Type':'application/x-www-form-urlencoded',
        'Authorization': 'Basic 123456789qwertyuiop'
      };   
      this.http2.post(this.apiUrl + type, credentials, headers)
        .then(data => {
          resolve(JSON.parse(data.data));
        })
        .catch(error => {
          reject(JSON.parse(error.error));
        });
    });
  }
  
}

Silahkan jalankan aplikasinya di emulator atau device, Untuk run di browser plugin http tidak akan bekerja. Sekian, semoga bermanfaat.


Related search:
  • Memperbaiki Blocked by CORS Policy di Ionic
  • Blocked by CORS Policy Ionic

Related Posts

Load comments