복붙노트

[JQUERY] jQuery를 AJAX 상호 도메인

JQUERY

jQuery를 AJAX 상호 도메인

해결법


  1. 1.사용 JSONP.

    사용 JSONP.

    jQuery를 :

    $.ajax({
         url:"testserver.php",
         dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
         success:function(json){
             // do stuff with json (in this case an array)
             alert("Success");
         },
         error:function(){
             alert("Error");
         }      
    });
    

    PHP :

    <?php
    $arr = array("element1","element2",array("element31","element32"));
    $arr['name'] = "response";
    echo $_GET['callback']."(".json_encode($arr).");";
    ?>
    

    내가 사용하는 PHP를했습니다 이후하면서 에코 잘못 될 수도, 그것은을이었다. 어떤 경우에는 따옴표를 알 출력 callbackName ( 'jsonString')에 필요합니다. 당신이 GET의 PARAMS에서 그것을 얻을 필요가 그래서 jQuery를, 그것의 자신의 콜백 이름을 전달합니다.

    스테판 켄달이 게시 된 그리고, $ .getJSON ()는 속기 방법이지만, 다음 필요에 추가 '콜백 =?' GET 매개 변수로 URL에 (예, 가치인가?, jQuery를 자체 생성 된 콜백 방법이 대체).


  2. 2.JSONP는 좋은 옵션이지만, 더 쉬운 방법이있다. 당신은 단순히 서버에 액세스 제어 - 허용 - 원산지 헤더를 설정할 수 있습니다. *로 설정하면 모든 도메인의 도메인 간 AJAX 요청을 받아 들일 것입니다. (https://developer.mozilla.org/en/http_access_control)

    JSONP는 좋은 옵션이지만, 더 쉬운 방법이있다. 당신은 단순히 서버에 액세스 제어 - 허용 - 원산지 헤더를 설정할 수 있습니다. *로 설정하면 모든 도메인의 도메인 간 AJAX 요청을 받아 들일 것입니다. (https://developer.mozilla.org/en/http_access_control)

    이 작업을 수행하는 방법은 물론, 언어와 언어와 다를 수 있습니다. 여기가 레일에 :

    class HelloController < ApplicationController
      def say_hello
        headers['Access-Control-Allow-Origin'] = "*"
        render text: "hello!"
      end
    end
    

    이 예에서, say_hello 조치는 모든 도메인의 AJAX 요청을 수락하고의 응답 반환합니다 "안녕하세요!"를.

    여기가 반환 할 수 있습니다 헤더의 예입니다 :

    HTTP/1.1 200 OK 
    Access-Control-Allow-Origin: *
    Cache-Control: no-cache, no-store, max-age=0, must-revalidate
    Content-Type: text/html; charset=utf-8
    X-Ua-Compatible: IE=Edge
    Etag: "c4ca4238a0b923820dcc509a6f75849b"
    X-Runtime: 0.913606
    Content-Length: 6
    Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)
    Date: Thu, 01 Mar 2012 20:44:28 GMT
    Connection: Keep-Alive
    

    그것이 쉬운, 그것은 일부 브라우저의 한계를 가지고있다. http://caniuse.com/#feat=cors를 참조하십시오.


  3. 3.당신는 Access-Control-Allow-Origin을 추가하여 HTTP 헤더를 통해이를 제어 할 수 있습니다. *로 설정하면 모든 도메인의 도메인 간 AJAX 요청을 받아 들일 것입니다.

    당신는 Access-Control-Allow-Origin을 추가하여 HTTP 헤더를 통해이를 제어 할 수 있습니다. *로 설정하면 모든 도메인의 도메인 간 AJAX 요청을 받아 들일 것입니다.

    정말 간단 PHP를 사용하여, 당신이 도메인에서 액세스 외부를 갖고 싶어하는 스크립트에 다음 줄을 추가합니다 :

    header("Access-Control-Allow-Origin: *");
    

    을 httpd.conf에서 mod_headers 모듈을 사용하는 것을 잊지 마십시오.


  4. 4.당신은 같은 기원 정책을 살펴 있어야합니다 :

    당신은 같은 기원 정책을 살펴 있어야합니다 :

    데이터를 얻을 수 있으려면, 그것은되어야합니다 :

    같은 프로토콜 및 호스트

    당신은 그것을 해결하기 위해 JSONP를 구현해야합니다.


  5. 5.": /// C : /test/htmlpage.html 파일"전화 "HTTP : //localhost/getxml.php"나는 로컬 디스크에서로드 웹 페이지로했다 URL 및 IE8 +와 Firefox12 + 브라우저에서이 작업을 수행, 사용의 jQuery (V1) .7.2 LIB는 상용구 코드를 최소화합니다. 기사 수십 읽은 후 마침내 그것을 알아 냈어. 여기 내 요약 한 것입니다.

    ": /// C : /test/htmlpage.html 파일"전화 "HTTP : //localhost/getxml.php"나는 로컬 디스크에서로드 웹 페이지로했다 URL 및 IE8 +와 Firefox12 + 브라우저에서이 작업을 수행, 사용의 jQuery (V1) .7.2 LIB는 상용구 코드를 최소화합니다. 기사 수십 읽은 후 마침내 그것을 알아 냈어. 여기 내 요약 한 것입니다.

    여기에 몇 가지 디버그 sysouts와 예 jQuery를 아약스 호출이다.

    jQuery.support.cors = true;
    $.ajax({
        url: "http://localhost/getxml.php",
        data: { "id":"doc1", "rows":"100" },
        type: "GET",
        timeout: 30000,
        dataType: "text", // "xml", "json"
        success: function(data) {
            // show text reply as-is (debug)
            alert(data);
    
            // show xml field values (debug)
            //alert( $(data).find("title").text() );
    
            // loop JSON array (debug)
            //var str="";
            //$.each(data.items, function(i,item) {
            //  str += item.title + "\n";
            //});
            //alert(str);
        },
        error: function(jqXHR, textStatus, ex) {
            alert(textStatus + "," + ex + "," + jqXHR.responseText);
        }
    });
    

  6. 6.동일 출처 정책은 도메인에서 요청을에서 자바 스크립트를 방지하지만, CORS 사양은 당신이 찾고있는 API 액세스의 단지 종류를 허용하고, 주요 브라우저의 현재 일괄 지원하는 것이 사실이다.

    동일 출처 정책은 도메인에서 요청을에서 자바 스크립트를 방지하지만, CORS 사양은 당신이 찾고있는 API 액세스의 단지 종류를 허용하고, 주요 브라우저의 현재 일괄 지원하는 것이 사실이다.

    클라이언트와 서버에 대한 공유 출처 간 리소스를 사용하도록 설정하는 방법을 참조하십시오 :

    http://enable-cors.org/

    "간 리소스 공유 (CORS)는 도메인 경계를 넘어 진정으로 오픈 액세스를 가능하게하는 사양입니다. 당신이 공공 콘텐츠를 제공하는 경우, 범용 자바 스크립트 / 브라우저 액세스를 열어 CORS를 사용하여 고려하시기 바랍니다."


  7. 7.이 가능하지만, 당신은 JSONP하지 JSON을 사용해야합니다. 스테판의 링크는 올바른 방향으로 지적했다. JQuery와 AJAX 페이지 JSONP에 대한 자세한 정보가 있습니다.

    이 가능하지만, 당신은 JSONP하지 JSON을 사용해야합니다. 스테판의 링크는 올바른 방향으로 지적했다. JQuery와 AJAX 페이지 JSONP에 대한 자세한 정보가 있습니다.

    레미 샤프 PHP를 이용한 구체적인 예를 갖는다.


  8. 8.내가 mod_proxy를 모듈을 사용했습니다, 그래서 나는 아파치 서버를 사용합니다. 모듈을 사용 :

    내가 mod_proxy를 모듈을 사용했습니다, 그래서 나는 아파치 서버를 사용합니다. 모듈을 사용 :

    LoadModule proxy_module modules/mod_proxy.so
    LoadModule proxy_http_module modules/mod_proxy_http.so
    

    그런 다음 추가 :

    ProxyPass /your-proxy-url/ http://service-url:serviceport/
    

    마지막으로, 스크립트로 프록시 URL을 전달합니다.


  9. 9.다른 도메인에서 호스팅되는 페이지에 하나 개의 도메인에서 호스팅되는 페이지에서 아약스 호출을 브라우저 보안 방지; 이것은 "동일 출처 정책"이라고합니다.

    다른 도메인에서 호스팅되는 페이지에 하나 개의 도메인에서 호스팅되는 페이지에서 아약스 호출을 브라우저 보안 방지; 이것은 "동일 출처 정책"이라고합니다.


  10. 10.오류 처리를 포함 JSONP를 사용하는 몇 가지 사례가있다.

    오류 처리를 포함 JSONP를 사용하는 몇 가지 사례가있다.

    JSONP를 사용하는 경우 그러나, 오류 이벤트가 발생되지 않도록 유의하시기 바랍니다! 참조 : http://api.jquery.com/jQuery.ajax/ 또는 jQuery를 아약스 요청 JSONP 오류를 사용하여


  11. 11.JQuery와 문서 (링크)에서 :

    JQuery와 문서 (링크)에서 :

    나는 그것을 걸릴 그래서 당신은 요청 JSONP 사용할 필요가있다. 그러나이에게 자신을 시도하지 않았습니다.


  12. 12.나는 당신의 문제를 해결하기 위해 3 방법을 알고있다 :

    나는 당신의 문제를 해결하기 위해 3 방법을 알고있다 :


  13. 13.마이크로 소프트 애저의 경우, 약간 다릅니다.

    마이크로 소프트 애저의 경우, 약간 다릅니다.

    하늘빛은 필요가 설정되는 것을 설정 특별한 CORS 있습니다. 그것은 본질적으로 뒤에서 같은 일이지만, 단순히 작동하지 않습니다 언급 joshuarh 헤더를 설정. 크로스 도메인을 가능하게하는 푸른 문서는 여기에서 찾을 수 있습니다 :

    https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

    나는이 특별한 설정을 가지고 내 호스팅 플랫폼을 실현하기 전에 몇 시간 동안이 주변에 바이올린.


  14. 14.그것은 모두 당신이 필요, 작동 :

    그것은 모두 당신이 필요, 작동 :

    PHP :

    header('Access-Control-Allow-Origin: http://www.example.com');
    header("Access-Control-Allow-Credentials: true");
    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
    

    JS (의 jQuery AJAX)

    var getWBody = $.ajax({ cache: false,
            url: URL,
            dataType : 'json',
            type: 'GET',
            xhrFields: { withCredentials: true }
    });
    
  15. from https://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain by cc-by-sa and MIT license