クマの手も借りたい
馬とテニスとリラックマが好きな IT 系のエンジニアです。
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("通信エラーが発生しました。");
    }
});
Web API The Good Parts

オライリーの「Web API」に特化した本です。最近の多くの Web サービスは API が活用されていますが、その技術はこれまでの Web サイトとそれほど大きく変わりません。

今後、マイクロサービス化が進む中で知っておいて損はない内容が詰め込まれており、現場のエンジニアやこれから Web 系のエンジニアを目指す人にもオススメの一冊です。

created by Rinker
¥2,376
(2018/09/20 11:58:13時点 Amazon調べ-詳細)

あなたにオススメ