クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonic2の使い方を紹介していきます。
Ionicでモバイルアプリを作ろう！(1)概要・環境構築
Ionicでモバイルアプリを作ろう！(2)ツールの基本的な使い方を覚える
Ionicでモバイルアプリを作ろう！(3)ページの作成/ページ遷移
Ionicでモバイルアプリを作ろう！(4)HTTP通信(REST API)
Ionicでモバイルアプリを作ろう！(5)スタイル定義
今回はコーディングから一旦離れ、開発に便利なプロキシの使い方を紹介します。
プロキシを使う
Ionicフレームワークは$ ionic serveコマンドでPCブラウザ上でアプリを実行することができます。
ローカル環境でテストできるのは非常に便利なのですが、
そのままだとブラウザのクロスドメイン通信制限に引っかかります。
APIとやりとりしたりできないのでは何かと困りますね。
サーバサイドに手が加えられない場合のCORS対策としてプロキシを使う方法があります。
独自にプロキシ環境を構築してもいいですが、
Ionicフレームワーク自体にプロキシ機能が備わっているのでそれを使ってみましょう。
プロジェクトフォルダのトップ階層にionic.config.jsonというファイルがあります。
そのファイルを次のように設定を記述します。
{
"name": "app_name",
"app_id": "",
"v2": true,
"typescript": true,
"proxies": [
{
"path": "/api",
"proxyUrl": "http://192.168.1.1"
}
]
}
proxyUrlにはアクセスしたいURLを指定しておきます。
この設定を記述できたら、コード中では次のようにURLを指定してHTTPリクエストを投げてください。
(HTTP通信の方法についてはIonicでモバイルアプリを作ろう！(4)HTTP通信(REST API))
this.http.get('/api/users').map(res => res.json());
こうすることで、APIとのやりとりをプロキシが代行してくれるので
クロスドメインを気にせずローカル環境での開発が可能になります。
