2012-10-16 2 views
1

AJAX 호출을 사용하여 URL에서 데이터를 가져옵니다. 그것은 나에게 json 객체를주고있다.도메인 간 문제 (다른 브라우저에는없는 IE에서 작업)

응용 프로그램을 실행할 때 해당 페이지가 페이지가 제어 할 수없는 정보에 액세스하고 있다는 정보와 함께 IE에서 정상적으로 작동합니다.

이렇게하면 보안 상 위험 할 수 있습니다. 계속 하시겠습니까?

하지만 내가 문제가 무엇인지 모르는 등

파이어 폭스, 크롬, 사파리와 같은 다른 브라우저에서 작동하지 않습니다. 왜 그것이 발생하고 어떻게 문제를 해결할 수 있는지 설명해주십시오.

내 코드 :

<!DOCTYPE html> 
<html> 
<head> 
    <title>Search Engine</title> 
    <script src="JS/jquery-1.4.2.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $.support.cors = true; 
     // create a script tag element 
     var script = document.createElement("script"); 
     // set the attribute, using the URL to pass data via query parameters 
     script.setAttribute("src", "http://192.168.13.111:7090/?uname=bhagirathip&wt=json&fl=*,score"); 
     script.setAttribute("type", "text/javascript"); 
     // add the script tag to the document head, forcing an HTTP request 
     document.getElementsByTagName("head")[0].appendChild(script); 
    }); 
    function Search() { 
     function callbackJsonHandler(data) { 
      alert(data); // This is the JSON data 
     } 
    } 
</script> 
</head> 
<body> 
    <form id="form"> 
     <div style="text-align: center"> 
     <input type="search" id="searchInput" autofocus /> 
     <input type="button" id="btnSearch" onclick="Search()" value="Search" /> 
    </div> 
</form> 
</body> 
</html> 
+0

아래의 답변에서'jmort253'으로 언급했듯이,'jsonp'를'callback'과 함께 사용하여 구현할 수 있습니다. 이것은'jquery'를 사용하는 것처럼 쉽습니다. –

+0

나는 당신이하려는 일에 대해 명확하지 않습니다. 여전히 작동하지 않는 크로스 도메인 아약스 호출을 시도하고 있으며 document.ready에서 스크립트 태그 요청을 작성하고 요청을 수행하지만 데이터를 검색합니다. , 데이터를 함수 호출로 브라우저에 다시 보내야합니다. 내 대답에 넣은 것과 같은'function callbackJsonHandler (data)'가 필요하고, 서버는'callbackJsonHandler ({/ * JSON here * /); '를 돌려 보내야한다. 또한 응답을 보내는 것과 관련된 서버 측 코드를 확인하는 데 도움이됩니다. [편집]에 추가하는 것을 고려해보십시오. – jmort253

+0

단계별 접근 방식을 공유해주십시오. 사실 나는 jquery가 매우 약하다. 서버에서 변경해야합니까 ?? 실제로 서버에 액세스 할 수 없습니다. – bhagirathi

답변

2

당신은 할 수없는 도메인 간 AJAX는 도메인에서 호출합니다. 이것은 웹 브라우저의 보안 기능으로, 악의적 인 JavaScript 코드가 렌더링 된 데이터를 웹 페이지에서 긁어내어 다른 도메인의 일부 불량 웹 사이트로 전송하는 것을 방지합니다.

브라우저 공급 업체는 AJAX 요청을 동일한 도메인으로 제한함으로써 다른 출처에서 가져온 JavaScript가 HTML 페이지가 제공되는 서버가 아닌 다른 서버로 데이터를 보낼 수 없도록합니다.

Internet Explorer에서는 메시지를 표시하지만 사용자가 그러한 메시지를 접하는 경우에는 no라고 말할 수 있습니다. 사용자에게 그러한 경고 메시지를 표시하면 이 아닌이 좋은 디자인 방식이며 응용 프로그램의 정당성에 대한 확신을 얻지 못합니다.

도메인간에 데이터를 보낼 수있는 유일한 방법은 "스크립트 태그 원격"이라는 브라우저 해킹 기술을 사용하는 것입니다.이 기술은 기본적으로 동일한 도메인 정책에 의해 제한되지 않는 HTML 요소를 사용합니다.

// create a script tag element 
var script = document.createElement("script"); 

// set the attribute, using the URL to pass data via query parameters 
script.setAttribute("src","http://192.168.9.11/userInput/?key="+userInput); 
script.setAttribute("type","text/javascript"); 

// add the script tag to the document head, forcing an HTTP request 
document.getElementsByTagName("head")[0].appendChild(script); 

, 원격 서버에 데이터를 보낼 수있는이 방법을 사용 : 예를 들어 script 태그 HTTP는 모든 서버에 GET 요청을 할 수 있습니다. 다시 JSON 데이터를 얻기 위해 다음 사항을 참고하면 응답을 처리하는 데 포장, 또는 패드를, 자바 스크립트 함수와 자바 스크립트 코드에 콜백을 정의해야합니다

function callbackJsonHandler(data) { 
    alert(data); // This is the JSON data 
} 

그리고 서버 측 코드를 반환해야합니다 내용 텍스트/자바 스크립트 핸들러를 호출하고 인수로 JSON을 통과 :

callbackJsonHandler({"key":"value","key1":"value2"}); 

브라우저가 브라우저에 자바 스크립트를 다운로드, 자바 스크립트에서 JSON에 액세스하는 데 사용할 당신에게 훅을주고, 즉시 실행 응답. 당신이 jQuery를 사용하고 있기 때문에


, 당신은 또한 당신이 원격 서버에 이러한 요청에서 콜백을 처리 할 수 ​​있도록 자바 스크립트 응답을 생성하는 데 사용할 수있는 패딩과 jQuery JSONP을 확인하거나 JSON 수 있습니다. 위의 설정과 마찬가지로 JSONP 요청이 제대로 작동하도록 서버가 설정되어 있어야합니다.

+0

아약스를 사용하여 교차 도메인 데이터에 액세스하는 다른 방법이 있습니까? 우리가 액세스 제어 허용 원점을 (사이트 또는 *) 으로 만든 경우 교차 도메인 데이터에 액세스 할 수있는 경우 해당 위치는 입니다. – bhagirathi

+0

권자, 예. 스크립트 태그 remoting 및 JSONP. 그것들 모두 AJAX가 아닙니다. :) 글쎄, 당신은 프록시를 사용할 수 있지만 좀 더 복잡합니다. 기본적으로 페이지는 AJAX를 통해 서버를 호출하고 서버는 원격 서버에 HTTP 요청을 한 다음 응답을 받아 다시 보냅니다. 'page -> your server -> remote server' – jmort253

+0

다른 방법으로 데이터를 가져올 수 있습니까? – bhagirathi

0

HTML 문서가 exampleA.com에서 도메인이 exampleB.com 인 서버로 제공되는 브라우저에서 도메인 간 요청을하는 문제에 대한 또 다른 해결책은 프록시를 사용하는 것입니다.

함께 작업하는 HTML 문서가 exampleA.com에서 제공된다고 가정 해 봅시다. exampleA.com을 소유하고 있으며 서버 측 및 클라이언트 측 코드에 액세스 할 수 있습니다. 반면 exampleB.com은 다른 사람이 소유하거나 관리하는 원격 서버입니다. exampleB.com에는 exampleA.com에서 사용하려는 일부 데이터가 있습니다.

악의적 인 앱이 사람들의 데이터로 나쁜 일을하지 못하도록 보호하는 동일한 원산지 정책으로 인해 AJAX가 작동하지 않는다는 것을 알고 있습니다. 그러나 서버는 동일한 도메인 정책으로 제한되지 않습니다.

||exampleA.com/test.html|| ---> http req --> ||exampleA.com/getData|| --http req --> ||exampleB.com/getJSON|| 

서버 측 :이 앱은 다음과 같은 작업을 수행 할 수 있음을 의미합니다 (로 서버, exampleA.com) : 즉

, 서버에서 당신 '

// JSON URL which should be requested 
$json_url = 'http://www.exampleB.com/getJSON'; 

// Initializing curl 
$ch = curl_init($json_url); 

// Configuring curl options 
$options = array(
CURLOPT_RETURNTRANSFER => true, 
CURLOPT_HTTPHEADER => array('Content-type: application/json') 
); 

// Setting curl options 
curl_setopt_array($ch, $options); 

// Getting results 
$result = curl_exec($ch); // Getting JSON result string 

은 자세한 내용은 Getting JSON Data with PHP Curl를 참조하십시오 : HTML을 제공하기 위해 사용하고, 당신은 타사 서버로 서버에서 HTTP 요청을 만드는 몇 가지 코드를 작성합니다. 각 서버 측 플랫폼에는 서버에 대한 HTTP 연결 기능이 있습니다.

// now, send the data in the response 
HttpResponse::status(200); 
HttpResponse::setContentType('application/json'); 
HttpResponse::setData($result); 
HttpResponse::send(); 

PHP HTTPResponse을 참조하십시오. 다시 말하지만, 작업하는 언어에 관계없이 문자열에서 데이터를 반환 할 수 있어야합니다.

PHP를 사용한다고 가정하고 위 코드를 "getJSON.php"라는 파일에 넣으십시오. 입구 <?php과 문서 시작 부분 사이에 공백이 없어야합니다. 그렇지 않으면 헤더를 설정할 수 없습니다. 이 응답을 보내는 더 좋은 방법이 있지만 플랫폼이 지정되지 않았으므로 독자의 연습 문제로 남겨 두겠습니다.

클라이언트 측 코드 : 이제

var searchURL = "/getJSON.php"; //From this URL json formatted data is present. 
    $.ajax({ 
     url: searchURL, 
     type: 'GET', 
     dataType: 'json', 
     contentType: 'application/json; charset=utf-8', 
     success: function (data) { 
      try { 
       alert(data); 
      } 
      catch (err) { 
       alert(err); 
      } 
     } 
    }); 

, 위의 자바 스크립트 코드에서, 당신은 다음 서버 차종을 같은 도메인 AJAX 요청 서버 exampleA.com을을하고, exampleB.com에 데이터 요청을 요청하면 exampleA.com은 응답의 데이터를 브라우저에 반환합니다.