【Monaca】Android版をビルドしてAndroid 9 で実行すると「Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED」と表示される

Monacaにおいて、「【Monaca】Onsen UI WordPressのWP REST APIを利用してons-carouselに記事を表示する」のAndroid版のデバッグビルドを行い、実際にau SHV40(Android 9)でアプリを実行したところ、「Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED」と表示され、まったく動作しませんでした。

otak-lab

【Monaca】Onsen UIとWordPressのWP REST APIを利用してons-carouselに記事を表示する

️2019/08/01

今回は、Onsen UI + Angular JSを使用して、WordPressのWP REST APIを利用してons-carouselに記事を表示する方法を紹介します。Monacaデバッガーの結果です。左右にスワイプすると、WordPressのWP REST APIを利用して取得した最新のブログ記事5件分のタイトルとサムネイルが切り替わります。下記URLをブラウザ上で入力すると、JSON形式の配列の内容が表示されます。http://xxx.yyy.zzz/wp-json/wp/v2/posts?_embed&per_page=5この情報をもとにサムネイルとタイトル、リンク先URLを取得してons-carousel-itemを生成します。ons-caro...

以下のリンク先に記載されている「Android 9（API レベル 28）以降では、クリアテキストのサポートがデフォルトで無効になっています。」が原因のようです。

Android Developers

170 Pockets

Network security configuration  |  Android Developers

https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted

Feature that allows app developers to customize network security settings in a safe configuration file.

Monacaの場合、config.xmlに以下のコードを追加することでエラーを回避することができます。
※2行目のwidgetタグは xmlns:android=”http://schemas.android.com/apk/res/android” を追加してください。

Before

After

Flutter モバイルアプリ開発バイブル 新品価格 ￥3,509から (2019/11/19 13:00時点)