Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@s4kr4

[Ionic] Service Proxies を使うプロジェクトをネイティブビルドするとHTTPリクエストが動作しない問題

環境

  • 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で判定できるプラットフォームの一覧は以下に載っています。

Platform - Ionic API Documentation - Ionic Framework

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What is going on with this article?