js 크로스 도메인 원칙과 두 가지 Solutions_javascript 기술에 대한 자세한 설명-JS 튜토리얼-php.cn

js 크로스 도메인 원칙과 두 가지 Solutions_javascript 기술에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:26:52

원래의

1631명이 탐색했습니다.

1. 크로스 도메인이란

우리는 페이지의 다른 서버에 데이터를 요청하기 위해 ajax를 자주 사용합니다. 이때 클라이언트에서 도메인 간 문제가 발생합니다.

크로스 도메인 문제는 자바스크립트 언어 보안 제한의 동일 출처 정책으로 인해 발생합니다.

간단히 말하면, 동일 원본 정책은 스크립트가 동일한 소스에서 창과 문서의 속성만 읽을 수 있다는 것을 의미합니다. 여기서 동일한 소스는 호스트 이름, 프로토콜 및 포트 번호의 조합을 나타냅니다.

예:

2. 실시원칙

HTML DOM에서 스크립트 태그는 도메인 전체에 걸쳐 서버의 데이터에 액세스할 수 있습니다. 따라서 스크립트의 src 속성을 크로스 도메인 URL로 지정하여 크로스 도메인 액세스를 달성할 수 있습니다.

예:

해당 접근 방법은 불가능합니다. 단, 다음 방법은 가능합니다.

반환되는 데이터에 대한 요구 사항이 있습니다. 즉, 서버에서 반환하는 데이터는 단순히 {"Name":"zhangsan"}일 수 없습니다.

이 json 문자열이 반환되면 이 문자열을 참조할 방법이 없습니다. 따라서 반환된 값은 var json={"Name":"zhangsan"} 또는 json({"이어야 합니다. 이름":"zhangsan"})

프로그램이 오류를 보고하는 것을 방지하려면 json 함수도 만들어야 합니다.

3. 해결 방법

옵션 1
서버측:

protected void Page_Load(object sender, EventArgs e)
  {
    string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

    Response.Clear();
    Response.Write(result);
    Response.End();
  }

로그인 후 복사

클라이언트:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">

    var result = null;
    window.onload = function () {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://192.168.0.101/ExampleBusinessApplication.Web/web2.aspx";

      var head = document.getElementsByTagName("head")[0];
      head.insertBefore(script, head.firstChild);

    };

    function callback(data) {
      result = data;
    }

    function b_click() {
      alert(result.name);
    }
  </script>
</head>
<body>
  <input type="button" value="click me!" onclick="b_click();" />
</body>
</html>

로그인 후 복사

옵션 2: jquery를 통해 완료

jquery의 jsonp 방법을 사용하면 서버 측에 대한 요구 사항이 있습니다.

서버측은 다음과 같습니다.

  protected void Page_Load(object sender, EventArgs e)
  {
    string callback = Request.QueryString["jsoncallback"];

    string result = callback + "({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

    Response.Clear();
    Response.Write(result);
    Response.End();
  }

로그인 후 복사

클라이언트:

$.ajax({ 
        async: false, 
        url: "http://192.168.0.5/Web/web1.aspx", 
        type: "GET", 
        dataType: 'jsonp', 
        //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象. 
        jsonp: 'jsoncallback', 
        //要传递的参数,没有传参时，也一定要写上 
         data: null, 
        timeout: 5000, 
        //返回Json类型 
         contentType: "application/json;utf-8", 
        //服务器段返回的对象包含name,data属性. 
        success: function (result) { 
          alert(result.date); 
        }, 
        error: function (jqXHR, textStatus, errorThrown) { 
          alert(textStatus); 
        } 
      });

로그인 후 복사

실제로 이 js를 실행하면 js는 서버에 다음과 같은 요청을 보냅니다.

http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742

서버는 이에 따라 다음 개체도 반환했습니다.

jsonp1354506338864({"이름":"장산","날짜":"2012-12-03"})

이 시점에서 크로스 도메인 샘플 데이터에 대한 요구 사항이 실현됩니다.

위는 js 크로스 도메인 원리와 두 가지 솔루션에 대한 소개입니다. 크로스 도메인 지식 포인트를 학습하는 모든 사람에게 도움이 되기를 바랍니다. 연구 및 조사를 위해 다른 관련 기사와 결합할 수도 있습니다.