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

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

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

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

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

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

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

IOS11.3で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("通信エラーが発生しました。");
    }
});