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