monacaアプリからajax通信ができなくてハマった！対処法まとめ

SEOの記事読んだあとなのでタイトルが胡散臭くなりました

状況

script.js

$(function(){
        $.ajax({
                type:"post",
                url:"http://VPSドメイン/driver.json",
                data:{
                    // パラメータ
                },
                dataType:"jsonp",
                success:function(data){
                    console.log("succeed");
                },error : function(XMLHttpRequest, textStatus, errorThrown) {
                    console.log("XMLHttpRequest : " + XMLHttpRequest.status);
                    console.log("textStatus : " + textStatus);
                    console.log("errorThrown : " + errorThrown.message);
                }
        });
}

はじめはいつも通りAccess-Control-Allow-Originに引っかかったのでｱｰﾊｲﾊｲって思って下記をサーバー側に追加。

Header append Access-Control-Allow-Origin: *
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

これでAndroidは通った。しかしiPhoneが通らない。
エラーは以下のとおり。

※220は別件なのでおかまいなく

412番エラー。Precondition Failed(前提条件失敗)。なんじゃいそりゃあ、と思ったんですが、Google先生に尋ねたところ

If-Unmodified-Since(クライアントがもっているキャッシュの更新確認)
クライアントがもっているキャッシュ日時がサーバの最終更新日時よりも新しい場合

If-Match(ブラウザがもっているETag値確認)
クライアントがもっているETag値に一致するリソースがサーバに存在しなかった場合

If-None-Match(ブラウザがもっているETag値確認)
クライアントからのリクエストメソッドが「GET」または「HEAD」以外の場合

とのことだったので、キャッシュ塞げばなんとかなるろーかと判断。

対処

ajaxで対処した。

script.js

        $.ajax({
                type:"post",
                url:"http://VPSドメイン/eventList.json",
                data:{
                    // パラメータ
                },
                async : false,
                cache : true,
                beforeSend : function(xhr) {
                    xhr.setRequestHeader("If-Modified-Since",
                    "Thu, 01 Jun 1970 00:00:00 GMT");
                },
                dataType:"jsonp",
                success:function(data){
                    console.log("succeed");
                },
                error:function(error){
                    console.log("error");
                }
        });

これの他、urlの末尾にGETパラメータとしてDate.now()を入れてもうまくいった。