[javascript] jQuery AJAX 크로스 도메인

다음은 test.php와 testserver.php의 두 페이지입니다.

test.php

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
    $(function() {
        $.ajax({url:"testserver.php",
            success:function() {
                alert("Success");
            },
            error:function() {
                alert("Error");
            },
            dataType:"json",
            type:"get"
        }
    )})
</script>

testserver.php

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

이제 내 문제 :이 두 파일이 같은 서버 (localhost 또는 웹 서버)에 있으면 작동하고 alert("Success")호출됩니다. 웹 서버의 testserver.php와 localhost의 test.php를 의미하는 다른 서버에 있으면 작동하지 않고 alert("Error")실행 중입니다. ajax 내부의 URL이 http://domain.com/path/to/file/testserver.php 로 변경된 경우에도

답변

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')따옴표 를 출력해야 합니다. jQuery는 자체 콜백 이름을 전달하므로 GET 매개 변수에서 가져와야합니다.

Stefan Kendall이 게시 한 것처럼 $ .getJSON () 은 속기 방법이지만 'callback=?'URL에 GET 매개 변수로 추가해야합니다 (예, 값은?, jQuery는 이것을 자체 생성 된 콜백 메소드로 바꿉니다).

답변

JSONP는 좋은 옵션이지만 더 쉬운 방법이 있습니다. Access-Control-Allow-Origin서버에서 간단히 헤더를 설정할 수 있습니다 . *모든 도메인의 도메인 간 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 요청을 수락하고 “hello!”응답을 반환합니다.

다음은 반환 할 수있는 헤더의 예입니다.

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를 참조 하십시오 .

답변

Access-Control-Allow-Origin 을 추가하여 HTTP 헤더를 통해이를 제어 할 수 있습니다 . *로 설정하면 모든 도메인의 도메인 간 AJAX 요청을 수락합니다.

PHP를 사용하면 정말 간단합니다. 도메인 외부에서 액세스하려는 스크립트에 다음 줄을 추가하십시오.

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

httpd.conf에서 mod_headers 모듈을 활성화하는 것을 잊지 마십시오.

답변

동일 출처 정책을 살펴 봐야합니다 .

컴퓨팅에서 동일한 출처 정책은 JavaScript와 같은 여러 브라우저 측 프로그래밍 언어에 대한 중요한 보안 개념입니다. 이 정책은 동일한 사이트에서 시작된 페이지에서 실행되는 스크립트가 특별한 제한없이 서로의 메서드 및 속성에 액세스 할 수 있도록하지만 다른 사이트의 페이지에서 대부분의 메서드 및 속성에 액세스 할 수는 없습니다.

데이터를 얻을 수 있으려면 다음과 같아야합니다.

동일한 프로토콜 및 호스트

해결 하려면 JSONP 를 구현해야 합니다.

답변

로컬 디스크 “file : /// C : /test/htmlpage.html”에서 웹 페이지를로드하고 “http : //localhost/getxml.php”url을 호출하여 IE8 + 및 Firefox12 + 브라우저에서 jQuery v1을 사용하여 웹 페이지를로드해야했습니다. .7.2 상용구 코드를 최소화하는 lib. 수십 개의 기사를 읽은 후 마침내 알아 냈습니다. 여기 내 요약이 있습니다.

서버 스크립트 (.php, .jsp, …)는 http 응답 헤더 Access-Control-Allow-Origin을 반환해야합니다. *
jQuery 아약스를 사용하기 전에 자바 스크립트에서이 플래그를 설정하십시오. jQuery.support.cors = true;
jQuery ajax 함수를 사용하기 전에 한 번 또는 매번 플래그를 설정할 수 있습니다
이제 IE와 Firefox에서 .xml 문서를 읽을 수 있습니다. 내가 테스트하지 않은 다른 브라우저.
응답 문서는 일반 / 텍스트, xml, json 또는 기타 모든 것이 될 수 있습니다.

다음은 디버그 sysout이 포함 된 jQuery ajax 호출 예제입니다.

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);
    }
});

답변

동일한 출처 정책으로 인해 JavaScript가 여러 도메인에서 요청하는 것을 막을 수는 있지만 CORS 사양은 원하는 API 액세스 유형 만 허용하며 현재 주요 브라우저 모음에서 지원됩니다.

클라이언트 및 서버에 대해 출처 간 자원 공유를 사용하는 방법을 참조하십시오.

http://enable-cors.org/

“CORS (Cross-Origin Resource Sharing)는 도메인 경계를 넘어 진정한 개방형 액세스를 가능하게하는 사양입니다. 공용 컨텐츠를 제공하는 경우 CORS를 사용하여 범용 JavaScript / 브라우저 액세스를 위해 열어보십시오.”

답변

가능하지만 JSON이 아닌 JSONP를 사용해야합니다. Stefan의 링크는 올바른 방향으로 당신을 가리 켰습니다. jQuery를 AJAX 페이지 JSONP에 대한 자세한 정보가 있습니다.

Remy Sharp는 PHP를 사용한 자세한 예제를 가지고 있습니다.