Ionic CORS issue in android

Ionic Framework ionic-v3
1

Hi all,

I am new to Ionic, I am working on HTTP Post Request, it is showing a CORS error

{_body: ProgressEvent, status: 0, ok: false, statusText: “”, headers: Headers, …}headers: Headers {_headers: Map(0), _normalizedNames: Map(0)}ok: falsestatus: 0statusText: ""type: 3url: null_body: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: “error”, …}proto: Body

I used this plugin in chrome for browser - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi - it was working fine.

But when I ran ionic cordova run android it was showing the same above error

Please let me know where I am wrong

This is my ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

local packages:

@ionic/app-scripts : 3.1.11
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.9.4
npm  : 5.7.1
OS   : macOS High Sierra

Misc:

backend : pro

This is my app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;

import { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;

import { HttpModule } from ‘@angular/http’;

@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule { }

This is my home.html

Ionic 3 Post Request Example

Sending a POST Request Example

Post Data

This is my home.ts

import { Component } from ‘@angular/core’;
import { NavController, ToastController } from ‘ionic-angular’;

import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

constructor(public navCtrl: NavController, public http: Http, private toastCtrl: ToastController) { }

sendPostRequest() {
this.http.post(‘http://mysite.com/api/v1/test/’, { “test-key”: “test-value” }).map(res => res.json()).subscribe(data => {
console.log(data)
this.presentToast(JSON.stringify(data))
}, error => {
console.log(error)
this.presentToast(JSON.stringify(error))
});
}

presentToast(msg: string) {
this.toastCtrl.create({
message: msg,
duration: 3000,
position: ‘bottom’
}).present();
}

}

and this is my ionic.config.json

{
“name”: “test”,
“app_id”: “”,
“proxies”: [
{
“path”: “/test”,
“proxyUrl”: “http://mysite.com/api/v1”
}
],
“integrations”: {},
“type”: “ionic-angular”
}