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"

이제 안드로이드는 다녔다. 그러나 아이폰이 다니지 않는다.
오류는 다음과 같습니다.


※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()를 넣어도 좋았다.