สร้างโปรเจ็กส์ ionic เรียกใช้ HTTP แบบ Native ไว้ทดสอบ CORS แบบ GET, POST

ใช้ทดสอบกับ

ASP.NET: เปิดใช้งาน Cross Origin Request ให้ WebApi ใช้ได้ทั้ง GET, POST

Supported platforms

Android
iOS
browser

สร้างโปรเจ็กส์ชื่อ corsApp แบบ blank

[code]
> ionic start corsApp blank
[/code]

Install the Cordova and Ionic Native plugins:

[code]
$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install –save @ionic-native/http
[/code]

แก้ไขไฟล์

src/app/app.module.ts
src/pages/home/home.html
src/pages/home/home.ts

1. src/app/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 { HTTP } from '@ionic-native/http';

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

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 { HTTP } from '@ionic-native/http';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

HTTP,

{ provide: ErrorHandler, useClass: IonicErrorHandler }

]

})

export class AppModule { }

2. src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>{{text}}</p>
  <button ion-button (click)="doGet()">1. Click Get </button>
  <button ion-button (click)="doPostHeader()">2. Click Post (Header)</button>
  <button ion-button (click)="doPostPlaceholder()">3. Click Post (Placeholder)</button>
  <button ion-button (click)="doPostPerson()">4. Click Post (Person)</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button (click)="doGet()">1. Click Get </button>

<button ion-button (click)="doPostHeader()">2. Click Post (Header)</button>

<button ion-button (click)="doPostPlaceholder()">3. Click Post (Placeholder)</button>

<button ion-button (click)="doPostPerson()">4. Click Post (Person)</button>

</ion-content>

3. src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { HTTP } from '@ionic-native/http';
import { AlertController } from 'ionic-angular';
import { RequestOptions, Headers } from '@angular/http';

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

  text: string;

  constructor(public navCtrl: NavController,
    private http: HTTP,
    public alertCtrl: AlertController) {
  }

  doGet() {
    let url = 'http://localhost:52579/api/Values';
    console.log(url);

    this.http.get(url, {}, {})
      .then(data => {
        this.text = "then";
        console.log("then");
        console.log("status > " + data.status);
        console.log("data   > " + data.data); // data received by server
        console.log("headers> " + data.headers);
      })
      .catch(error => {
        this.text = "catch";
        console.log("catch");
        console.log("status > " + error.status);
        console.log("data   > " + error.error); // error message as string
        console.log("headers> " + error.headers);
      });
  }

  doPostHeader() {
    var headers = new Headers();
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
    headers.append('Accept', 'application/json');
    //headers.append('content-type','application/json');
    let options = new RequestOptions({ headers: headers });

    this.http.setDataSerializer('json');
    this.http.post('http://localhost:52579/api/Values',
      {
        "LocationID": 2,
        "Flag": "O",
        "UserFingerID": "66",
        "lat": 10.00,
        "lon": 103.00
      }, {})
      .then(data => {
        this.text = "then";
        console.log("then");
        console.log("status > " + data.status);
        console.log("data   > " + data.data); // data received by server
        console.log("headers> " + data.headers);
      })
      .catch(error => {
        this.text = "catch";
        console.log("catch");
        console.log("status > " + error.status);
        console.log("data   > " + error.error); // error message as string
        console.log("headers> " + error.headers);

        let alert = this.alertCtrl.create({
          title: 'Cannot connect to server!',
          message: 'Please check the server settings.',
          buttons: ['Ok']
        });
        alert.present()
      });
  }

  doPostPlaceholder() {
    this.http.setDataSerializer('json');
    this.http.post('https://jsonplaceholder.typicode.com/posts',
      {
        "userId": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      }, {})
      .then(data => {
        this.text = "then";
        console.log("then");
        console.log("status > " + data.status);
        console.log("data   > " + data.data); // data received by server
        console.log("headers> " + data.headers);
      })
      .catch(error => {
        this.text = "catch";
        console.log("catch");
        console.log("status > " + error.status);
        console.log("data   > " + error.error); // error message as string
        console.log("headers> " + error.headers);

        let alert = this.alertCtrl.create({
          title: 'Cannot connect to server!',
          message: 'Please check the server settings.',
          buttons: ['Ok']
        });
        alert.present()
      });
  }

  doPostPerson() {
    this.http.setDataSerializer('json');
    this.http.post('http://localhost:52579/api/Values',
      {
        "ID": 5,
        "FirstName": "Phaisarn",
        "LastName": "Sutheebanjard"
      }, {})
      .then(data => {
        this.text = "then";
        console.log("then");
        console.log("status > " + data.status);
        console.log("data   > " + data.data); // data received by server
        console.log("headers> " + data.headers);
      })
      .catch(error => {
        this.text = "catch";
        console.log("catch");
        console.log("status > " + error.status);
        console.log("data   > " + error.error); // error message as string
        console.log("headers> " + error.headers);

        let alert = this.alertCtrl.create({
          title: 'Cannot connect to server!',
          message: 'Please check the server settings.',
          buttons: ['Ok']
        });
        alert.present()
      });
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { HTTP } from '@ionic-native/http';

import { AlertController } from 'ionic-angular';

import { RequestOptions, Headers } from '@angular/http';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

text: string;

constructor(public navCtrl: NavController,

private http: HTTP,

public alertCtrl: AlertController) {

}

doGet() {

let url = 'http://localhost:52579/api/Values';

console.log(url);

this.http.get(url, {}, {})

.then(data => {

this.text = "then";

console.log("then");

console.log("status > " + data.status);

console.log("data > " + data.data); // data received by server

console.log("headers> " + data.headers);

})

.catch(error => {

this.text = "catch";

console.log("catch");

console.log("status > " + error.status);

console.log("data > " + error.error); // error message as string

console.log("headers> " + error.headers);

});

}

doPostHeader() {

var headers = new Headers();

headers.append('Access-Control-Allow-Origin', '*');

headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');

headers.append('Accept', 'application/json');

//headers.append('content-type','application/json');

let options = new RequestOptions({ headers: headers });

this.http.setDataSerializer('json');

this.http.post('http://localhost:52579/api/Values',

{

"LocationID": 2,

"Flag": "O",

"UserFingerID": "66",

"lat": 10.00,

"lon": 103.00

}, {})

.then(data => {

this.text = "then";

console.log("then");

console.log("status > " + data.status);

console.log("data > " + data.data); // data received by server

console.log("headers> " + data.headers);

})

.catch(error => {

this.text = "catch";

console.log("catch");

console.log("status > " + error.status);

console.log("data > " + error.error); // error message as string

console.log("headers> " + error.headers);

let alert = this.alertCtrl.create({

title: 'Cannot connect to server!',

message: 'Please check the server settings.',

buttons: ['Ok']

});

alert.present()

});

}

doPostPlaceholder() {

this.http.setDataSerializer('json');

this.http.post('https://jsonplaceholder.typicode.com/posts',

{

"userId": 1,

"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",

"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"

}, {})

.then(data => {

this.text = "then";

console.log("then");

console.log("status > " + data.status);

console.log("data > " + data.data); // data received by server

console.log("headers> " + data.headers);

})

.catch(error => {

this.text = "catch";

console.log("catch");

console.log("status > " + error.status);

console.log("data > " + error.error); // error message as string

console.log("headers> " + error.headers);

let alert = this.alertCtrl.create({

title: 'Cannot connect to server!',

message: 'Please check the server settings.',

buttons: ['Ok']

});

alert.present()

});

}

doPostPerson() {

this.http.setDataSerializer('json');

this.http.post('http://localhost:52579/api/Values',

{

"ID": 5,

"FirstName": "Phaisarn",

"LastName": "Sutheebanjard"

}, {})

.then(data => {

this.text = "then";

console.log("then");

console.log("status > " + data.status);

console.log("data > " + data.data); // data received by server

console.log("headers> " + data.headers);

})

.catch(error => {

this.text = "catch";

console.log("catch");

console.log("status > " + error.status);

console.log("data > " + error.error); // error message as string

console.log("headers> " + error.headers);

let alert = this.alertCtrl.create({

title: 'Cannot connect to server!',

message: 'Please check the server settings.',

buttons: ['Ok']

});

alert.present()

});

}

บรรทัดที่ 21: doGet() ทดสอบ GET
บรรทัดที่ 42: doPostHeader() ทดสอบ POST แบบกำหนด Header ใช้ได้บนมือถือ Android แต่รันด้วย cordova run browser ไม่ได้ (ขึ้นอยู่กับ Project ของทาง WebApi ด้วย)

บรรทัดที่ 82: doPostPlaceholder() ทดสอบกับเว็บข้างนอก
บรรทัดที่ 113: doPostPerson() ใช้งานได้ปกติ

รันด้วยแพลตฟอร์ม browser

[code]
> ionic cordova platform rm browser
> ionic cordova platform add browser
> ionic cordova run browser
[/code]

Link

Phaisarn Sutheebanjard

blog.phaisarn.com

สร้างโปรเจ็กส์ ionic เรียกใช้ HTTP แบบ Native ไว้ทดสอบ CORS แบบ GET, POST