クマの手も借りたい
茶トラネコ(@kumanotemo)です。上場を控えたITベンチャーを2社も退職してフリーランスの道を選んだ放浪エンジニアです。
JavaScript

iOS11.3でAjax通信ができなくなった時の対処法

iPhone(iOS11.3)から、画像とテキストエリアが 1 つずつある画面で投稿をしたら、jQuery の $.ajax() でいうところの error にハンドリングされるようになりました。

表示しているアラートメッセージを「通信エラーが発生しました」にしていたので、タイムアウトなのかサーバサイド側のエラーなのか半信半疑だったのですが、PC(chrome)から投稿する分には問題がないことが判明しました。

最近までは iPhone からも使えていた記憶があるので、怪しむべきは最近ソフトウェアアップデートのあった iOS になります。

エラーが発生するケースはFormDataを使用している時

画像をアップロードした場合は大丈夫だということがわかりました。

また画像があることもあり、POST データは FormData を使って生成していたのですが、まさにこれと同じ現象を解決していた人を見つけました。

原因究明としては近いところまでいっていたようですが、空の値を送らないようにするという発想はすぐには思いつかなかったかもしれません。

使っていた投稿欄も画像は任意なので、input タグ(type属性がfile)は空で POST されるケースがあります。

この場合に、この値を削除することで解決に至ります。

よって、画像をアップロードした場合は問題なく投稿できていたハズですが、これはちょっと気付きにくいパターンです。

iOS のバグなのか仕様なのかわかりませんが、バージョン依存度が高いと急に問題が発生するので厄介ですね。

下記は今回のケースのサンプルソースです。いろいろと端折っています。

var $form = $('#form');
var fdo = new FormData($form[0]);

// これを追加
var image_file = $('#image_file').val();
if (image_file === null) {
    fdo.delete('image_file');
}

$.ajax( {
    url: '/hoge',
    type: 'post',
    processData: false,
    contentType: false,
    data: fdo,
    dataType: 'json',
    success: function(data) {
        location.reload();
    },
    error: function(xhr, status, error) {
        alert("通信エラーが発生しました。");
    }
});
やさしいKotlin入門

プログラミング初心者または Kotlin 初心者向けの入門本。Android 開発ではなく Kotlin の言語を覚えてみたい方にオススメの入門本です。

Java と比較して説明される書籍が多い中、Java や他のプログラム言語を知らない人向けになるので、例えば Java はあまり詳しくないけど PHP や Python は書けるといったパターンとも相性がいいですよ。

あなたにオススメ