Cordova、IonicでHTTP通信できない・画像とかが読み込めないときの対処法3選

Cordova(Phonegap)でプログラミングを始めた頃、ネットワークが繋がらなくて困ったことがたびたび起こりました。

Angularだと$httpのAPIが、Webで大丈夫なのにアプリ化すると繋がらない。 またはimgタグの画像が表示されない。srcタグの外部スクリプトやCSS、フォントが読みこめない等々。

そんなときの3大あるあると対処法をまとめてみました。

ホワイトリストの設定ミス

https://github.com/apache/cordova-plugin-whitelist CordovaはプラグインでHTTP接続の許可・不許可を管理しています。

cordova plugin add cordova-plugin-whitelist したあと、config.xmlで設定します。下は接続を全許可する例です。

<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />

Content Security Policy(CSP)

環境によっては、XSS(クロスサイトスクリプティング)対策に外部リソースとの関係を明示する必要があります。 metaタグに設定します。 自分は経験ないので、下記URLを参考にお願いします。

Content-Security-Policy Header ⟶ CSP Reference & Examples

Cordovaを4.0.0から5.2.0にしてみる - Qiita

iOS9以降の場合は「App Transport Security」

iOS9・XCode7以降で開発するアプリではHTTPSでの接続が推奨になりました。 HTTPリクエストを引き続き利用するにはアクセスを許可するホストの明示が必要です。

[iOS 9] iOS 9 で追加された App Transport Security の概要 | DevelopersIO

AmazonのS3に画像をあげてる場合を例にすると、info.plistに次のような設定をします。 (HTTPS接続にするのが正しい対処なので、S3を例にしたのはあくまで一例です。)

XCodeで見るとこんな感じです。自分はXCodeだと入れ子が作りにくくて困ったのでエディタで書きました。

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>s3.amazonaws.com</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <key>NSIncludesSubdomains</key>
      <true/>
    </dict>
  </dict>
</dict>

そもそもこのATSをオフにする方法もあります。楽ですがApple非推奨なので、審査に通らないかもしれません。

<key>NSAppTransportSecurity</key> 
<dict> 
    <key>NSAllowsArbitraryLoads</key><true/>
</dict>