Cross Origin Policy & Fiddler JSON 디버깅

Question

JSON 데이터를 사용하여 최신 webapp를 개발하고 있습니다. JSON 데이터를 조롱하기 위해 Fiddler라는 도구를 사용하여 following blog post을 찾았습니다.

저는 주로 메모장 + +를 사용하여 개발 중이며 주로 Chrome에서 테스트하고 있습니다. (결국 더 많은 브라우저에 집중할 것입니다). 나는 메인 HTML 파일 "index.html을"을하고 난 파일과 같습니다 구조를 사용

index.html 

    assets 

     /js 

     /css 

     /img 

내가 보통 ++ 메모장에서 크롬에서 index.html 파일을 실행하여 내 테스트를 실행합니다. 그러나 Fiddler의 JSON "스푸핑 (spoofing)"기능을 사용하고자하므로 크로스 기점 정책 제한을 적용합니다. 피들러의 자동 응답 도구가 주어진 URI (여기, http://server.anywhere.com/test)와 일치하고 파일에 미리 만들어진 JSON 응답을 반환합니다.

XMLHttpRequest는 http://server.anywhere.com/test을로드 할 수 없습니다. Origin null은 Access-Control-Allow-Origin이 허용하지 않습니다.

코드는이 (jQuery를 1.9.1)수록 막 간단하다 :

$(document).ready(function(){ 
    $.getJSON("http://server.anywhere.com/test", function(data) { 
     $.each(data, function(i, item) { 
      console.log('Item number: ', i); 
     }); 
    }); 
}); 

이 작업을 수행 할 수있는 더 나은 방법이 있나요? Chrome의 개발자 도구일까요?

감사합니다.

Answer 1

나쁜 소식은 Chrome과 Firefox가 보안상의 이유로 도메인 간 통화를 허용하지 않는다는 것입니다.

옵션 1 : AJAX를 사용하여 로컬 PHP 파일을 호출하고 해당 파일에서 "fopen"을 사용하여 데이터를 가져옵니다. (웹 응용 프로그램은 서버에서 실행중인 경우 사용)

옵션 2 : 사파리 및 모바일 장치가이 요청 (웹 응용 프로그램은 클라이언트 측에서 완전히 실행되고있는 경우 사용)

로 데이터를 얻을 수 있습니다

$.ajax({ 
    url: ('www.sitewherejsonis.com/data.json'), 
    type: 'GET', 
    dataType: 'json', 
    beforeSend: function(xhr) { 
    xhr.setRequestHeader("Authorization", "Base 64"; // if you need to authentificate 
    }, 

    success: function (data, textStatus, xhr) { 
     // do something 
     } 
    error: function(xhr, exception) { 
    // catch error 
    } 
    }); 

Answer 2

이 작업을 수행 할 수있었습니다. 명령 행을 통해 SimpleHTTPServer를 사용하여 프로그램을 시작했습니다. 그런 다음 브라우저에서 localhost : 8000을 가리켰으며 모든 것이 제대로 작동했습니다. Fiddler2 및 Google 크롬 사용.

Answer 3

당신은 이것을 위해 다른 웹 서버가 필요하지 않습니다. 당신은 Fiddler 's AutoResponder로이 모든 것을 할 수 있습니다. 질문의 해당 규칙을 편집하여 요청 사이트의 원본 값을 포함하는 Access-Control-Allow-Origin 응답 헤더를 만드십시오. 전과, 규칙 목록에 *CORSPreflightAllow

의 조치를 을

Method:OPTIONS PartialTargetURL : 당신이 "비 간단한"(CORS 용어) 요청을 수행해야하는 경우

, 규칙 like so를 추가 타겟 응답을 반환하는 규칙. 이 규칙에 따라 Fiddler는 XMLHttpRequest 객체가 보낸 프리 플라이트 요청에 대해 긍정적으로 응답하게됩니다. 다른 스레드에 게시 된

Answer 4

:

이 시도 - https://api.allowallorigin.com/restapi?url=www.sitewherejsonis.com/data.json

나는 여러 옵션을 시도 후이 솔루션을 만들었습니다.같은 줄에있는 다른 솔루션은 일을 처리하지만 JSON 데이터 위치가 변경 될 때까지 JSON 데이터 위치를 변경합니다. 위의 서비스는 무료이며 계속 무료로 제공됩니다. 사람들이 유용하다고 생각하면 홈 페이지와 Google 광고를 몇 개 넣을 수 있지만 가까운 미래에는 무료로 계속 사용해야합니다.

샘플 코드 :

jPath.prototype.loadJSONDataFromUrl = function(_url, callback) { 
    $.getJSON(_url, function(data) { 
     $.fn.jsonData = JSON.stringify(data); 
    }).done(function(json){ 
     if(callback != null) { 
      callback(); 
     } 
    }).fail(function(){ 
     $.getJSON('https://api.allowallorigin.com/allorigin/restapi?url='+_url, function(data) { 
      console.log(data); 
      console.log(JSON.stringify(data)); 
      $.fn.jsonData = JSON.stringify(data); 
     }).done(function(json){ 
      if(callback != null) { 
       callback(); 
      } 
     }); 
    }); 
}