js 크로스 도메인 원칙과 두 가지 Solutions_javascript 기술에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:26:521627검색
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 크로스 도메인 원리와 두 가지 솔루션에 대한 소개입니다. 크로스 도메인 지식 포인트를 학습하는 모든 사람에게 도움이 되기를 바랍니다. 연구 및 조사를 위해 다른 관련 기사와 결합할 수도 있습니다.