Android の WebView 内で ajax が動かない！４つの対策

ローカル環境（PC環境）だと動いていたAjaxが・・・

なぜかWebViewだと動かない
Android実機だと通信失敗する
色々試したけど通信できない

こういうトラブルに遭遇したことがありました。

でも解決方法が分かったので、
Androidの WebViewでajaxが動かないときの対処法を紹介します。

いくつかの要点を押さえれば解決可能

このページの目次

対処法１．適切なパーミッションがあるかどうか
対処法２．WebSettings から JavaScript有効化
対処法３．コンソール（console）のエラー内容を確認
対処法４．blocked by CORS policy エラーが出てないか確認
ここまでの Ajax が動かないときの対策まとめ

対処法１．適切なパーミッションがあるかどうか

１つめはパーミッション設定の見直し

当たり前ですが、Ajaxは次のようなことをします。

サーバーにデータを送る
通信後にレスポンスを行う

仰々しく書いたけど、結局はネットワークを利用してるってことです。

そのため、必ず以下のパーミッション必須ですね。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.example">

    <!-- ネット通信のパーミッション追加！！ -->
    <uses-permission android:name="android.permission.INTERNET" />
    
    <application...

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.example">

<uses-permission android:name="android.permission.INTERNET" />

<application...

必ず INTERNET のパーミッションがないとダメ！

アプリを作ったばかりだと忘れがちなので、まずはココをチェックです。

対処法２．WebSettings から JavaScript有効化

お次は WebSettings の見直しをすること

コレも意外と盲点ですね。

まず重要なのはJavaScriptが有効になってるかどうか

▼ 必ず setJavaScriptEnabled を有効化

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

1 2	WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true);

まあ Ajax まで使ってて、この書き忘れをするのはレアですね。

でも書き忘れていないか、念のために確認しておとくと安全です。

あとそれから・・・

▼ 一応 setDomStorageEnabled も有効化しておくとベスト

WebSettings settings = webView.getSettings();
settings.setDomStroageEnabled(true);

1 2	WebSettings settings = webView.getSettings(); settings.setDomStroageEnabled(true);

ここまで設定しとけば、恐らく通信成功すると思います。

対処法３．コンソール（console）のエラー内容を確認

これは最初にすべきことかもですが・・・

もし上記２つでも解決しないなら、JS側でのエラーが疑われます。

なのでコンソールのエラー出力確認してみてください。

とはいえ WebView から直接確認なんてできません。

なのでコンソール出力確認には、以下コードを書く必要があります。

WebSettings webSettings = webView.getSettings();

/// 中略...

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onConsoleMessage(ConsoleMessage cslMsg) {
        Log.d("MyApp", cslMsg.message() + " at line "
                + cslMsg.lineNumber() + " of "
                + cslMsg.sourceId());
        return super.onConsoleMessage(cslMsg);
    }
});

WebSettings webSettings = webView.getSettings();

/// 中略...

webView.setWebChromeClient(new WebChromeClient() {

@Override

public boolean onConsoleMessage(ConsoleMessage cslMsg) {

Log.d("MyApp", cslMsg.message() + " at line "

+ cslMsg.lineNumber() + " of "

+ cslMsg.sourceId());

return super.onConsoleMessage(cslMsg);

}

});

このように onConsoleMessage をオーバーライドすればいいだけ。

開発者ツールと同じ感覚でデバッグできて便利ですね。

対処法４．blocked by CORS policy エラーが出てないか確認

今度はAjax側（サーバー側）での話

次みたいな場合だと、CORS policy エラーってのが出ます。

異なるドメイン間で通信を行う時
正しいCORSヘッダーを含んでない時

僕自身も Ajax を使っていて、遭遇したことが何回かありました。

実際にCORS policy エラーが起きると、こんなエラー表示されます。

▼ 実際のコンソール表示されたエラー例

Access to fetch at 'https://hoge.com/hoge.php' from origin 'http://outer.example.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'https://hoge.com/hoge.php' from origin 'http://outer.example.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

まあ WebView でこういうエラーは起きるか分からないです。
だって WebView ＜＝＞外部サイト　は異なるドメイン間ではないので

でも何かのはずみで起きることもあるかもしれません。

その場合の対処法は次ページで解説した通りです。