環境
- Ionic 3.19.1
WebApp等から別ドメインのAPIを直接叩くと、CORS制約に引っかかってリソースを取得できないことがあります。
Ionicでは、Service Proxiesを設定することで、このCORS制約を回避することができます。
Ionicの素振りとしてGitHub Event WatcherというWebAppを作ったのですが、このアプリ内では GitHub のユーザーイベントを取得するAPIを叩く際にService Proxiesを使用しています。
プロキシの設定は以下です。
ionic.config.json
...
"proxies": [
{
"path": "/github",
"proxyUrl": "https://api.github.com"
}
]
...
また、APIを叩くコードはこんな感じです。
src/providers/events/events.js
...
constructor(
public http: HttpClient,
) {
}
...
getEvents(username: string): Observable<Object> {
const url = `users/${username}/events`;
return this.http.get(`/github/${url}`);
}
...
しかし、CORSはWebアプリ上の制約であり、ネイティブアプリには関係ありません。
Cordovaでビルドしたネイティブアプリからだと、このコードではリクエストを送信できません。
proxiesの設定が無視され、そのまま/github/users/${username}/eventsにリクエストを飛ばしてしまいます。
解決策として、Web/PWAとネイティブで処理を分けます。
src/providers/events/events.js
...
constructor(
public http: HttpClient,
public platform: Platform,
) {
}
...
getEvents(username: string): Observable<Object> {
let url = `/users/${username}/events`;
if (this.platform.is('mobile')) {
url = `https://api.github.com/${url}`;
} else {
url = `/github/${url}`
}
return this.http.get(url);
}
...
これでネイティブの場合は普通に元のURLを叩きに行くようになります。
このように、プラットフォームに依存した処理を書く場合はIonicのPlatform APIを使います。
Platform APIで判定できるプラットフォームの一覧は以下に載っています。