2011-02-24 7 views
2

user1.mydomain.comuser2.mydomain.com 개의 도메인이 있습니다. 나는 api.mydomain.com을 사용하여 AJAX/JSON을 통해 내 웹 응용 프로그램을 처리합니다. 그래서 user1.mydomain.com에서 api.mydomain.com/projects으로 POST 요청을 보내고 다음과 같이 jQUery를 사용하여 : {'action':'getActiveProjects'}을 입력하면 결과적으로 JSON에서 user1의 활성 프로젝트 목록을 가져옵니다. $.getJSON 메서드를 찾았지만 서버에 데이터를 보내는 옵션이없는 것 같습니다. 내가 직면하는 또 다른 문제는 동일한 기원 정책이다. 그래서, 어떻게 다른 하위 도메인에 서버에 일부 JSON POST 및 결과 JSON 응답을 얻을 수 있습니까?jQuery를 사용하여 하위 도메인에서 JSON 가져 오기

답변

10

dataType: "jsonp"을 지정하여 $.ajax과 JSON-P를 사용하십시오. 링크 된 문서의 세부 정보입니다. 서버는 JSON이 아니라 JSON-P으로 응답해야하지만, 서버를 제어하면 매우 쉽게 처리 할 수 ​​있습니다.

비교적 최근의 브라우저 (IE가 아닌) 만 지원해야하는 경우 CORS을 지원하도록 서버를 설정할 수 있습니다. 하지만 이것은 최근 브라우저에서만 지원됩니다. IE8이 지원하지만 일반 XMLHttpRequest 객체를 통해 투명하게 지원하지는 않지만 jQuery가 자동으로 처리하지 않는 완전히 다른 전송 객체 (XDomainRequest)가 필요합니다.). 당신은 예를 들어, jQuery를이 URL에 callback 매개 변수를 추가 한 것을 볼 수 있습니다 서버에서

$.ajax({ 
    // The source URL 
    url: "http://jsbin.com/ubucu4", 

    // Tell jQuery you're doing JSON-P 
    dataType: "jsonp", 

    // Include some data with the request if you like; 
    // this example doesn't actually *use* the data 
    data: {some: "data"}, 

    // You can control the name of the callback, but 
    // usually you don't want to and jQuery will handle 
    // it for you. I have to here because I'm doing this 
    // example on JSBin. 
    jsonpCallback: "exampleCallback", 

    // Success callback 
    success: function(data) { 
    display("Received data, typeof data = " + typeof data); 
    display("data.foo = " + data.foo); 
    display("data.bar = " + data.bar); 
    }, 

    // Error callback  
    error: function(jxhr, status, err) { 
    display("Error, status = " + status + ", err = " + err); 
    } 
}); 

Live copy

: 여기

는 jQuery를 사용하여 JSON-P의 예입니다 위의 경우 http://jsbin.com/ubucu4?callback=exampleCallback 일 수 있지만 jQuery 컨트롤을 사용하면 이름이 좀 더 이국적입니다. 서버 측 코드는 JavaScript 함수 호출 인 응답을 생성하여 해당 함수를 호출해야합니다. 상기 예에서 내 반응이다 : 이것은 모든 때문에 대신 Same Origin Policy 대상이다 XMLHttpRequest를 사용하는 일이

exampleCallback({ 
    "foo": "This is foo", 
    "bar": "This is bar" 
}); 

는 JSON-P는 동적으로 추가 script 태그 (미세이다)를 사용한다. 내 예에서, 태그는 JSON-P 응답 인 스크립트를 검색하고 그것을 실행합니다

<script type='text/javascript' src='http://jsbin.com/ubucu4?callback=exampleCallback'></script> 

브라우저 같이 보일 것입니다. 즉 콜백이 호출되고 데이터가 스크립트에 제공됩니다.

JSON-P 응답은 기술적으로 JSON이 아닙니다. 이는 자바 스크립트이므로 페이지에 코드를 직접 삽입하기 때문에 신뢰할 수있는 서버 (예 : 하위 도메인 서버)에서만 JSON-P 만 사용해야한다는 것이 중요합니다. 그렇지 않으면 신뢰 할 수없는 서버를 사용하고 있다면 주입 된 코드가 정보를 페이지에서 읽고 제 3 자에게 보낼 수 있습니다. 귀하의 키워드로주의하십시오.

1

하위 도메인은 개별 도메인이므로 Ajax/JSON을 사용할 수 없습니다. 일 수 있지만 JSONP을 사용하십시오. jQuery가 내장되어 있으므로 요청할 때만 지정할 수 있습니다. 관련 docs을 살펴보십시오. JSONP에서 POST를 사용할 수는 없지만 (이 기술의 작동 방식에 따라 제한이 있음) 크로스 브라우저 간 도메인 요청을 수행 할 수있는 다른 방법은 없습니다.

1

설정 메인 도메인

document.domain = "mydomain.com" 

More info here

+0

이 다른 문제에 대한 올바른 솔루션에 document.domain. 하위 도메인의 콘텐츠를 게재하는 iframe과의 통신을 허용하는 데 사용됩니다. 이 질문에 대한 유일한 정답은 JSONP 또는 CORS입니다. –

관련 문제