JS 크로스 도 메 인 요청
모든 브 라 우 저 는 동원 정책 을 준수 합 니 다.이 정책 은 원본 의 동적 스 크 립 트 가 다른 원본 의 http 응답 과 쿠키 를 읽 거나 조작 하지 못 하도록 보장 합 니 다.이로써 브 라 우 저 는 서로 다른 원본 의 내용 을 격 리 시 켜 서로 조작 하지 못 하 게 합 니 다.동원 이란 프로 토 콜,도 메 인 이름과 포트 가 일치 하 는 상황 을 말한다.예 를 들 어 먼저 Nginx 에 두 개의 가상 호스트,하 나 는 감청 80 포트,다른 하 나 는 감청 81 포트 를 설정 합 니 다.
server {
listen 80;
server_name localhost;
location / {
root D:/dev/workspace;
index index.html index.htm;
}
location ~ \.php$ {
# php
}
}
// show_person.php
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function sayHello(person){
alert(person.name + ', your age is ' + person.age);
}
// jQuery ajax person.php
$.getJSON('http://localhost:80/MongoTest/person.php', function(data){
sayHello(data);
});
</script>
</head>
<body>
</body>
</html>// person.php
<?php
$person = array('name' => 'kobe', 'age' => 34);
echo json_encode($person);
?>그리고 80 포트 에 먼저 접근해 서 url 을 입력 하 십시오.http://localhost/cross_domain/show_person.php。대화 상자 가 팝 업 됩 니 다.표시:kobe,your age is 34.
그리고 81 포트 에 접근 합 니 다.http://localhost:81/cross_domain/show_person.php,결과 오류:
XMLHttpRequest cannot loadhttp://localhost/MongoTest/person.php. Origin http://localhost:81 is not allowed by Access-Control-Allow-Origin. 이것 이 바로 동원 전략 작용 의 효과 다.브 라 우 저 에서 81 포트 의 내용 을 방 문 했 기 때문에 showperson.php 에서 요청 한 것 은 80 포트 이기 때문에 요청 한 것 은 서로 다른 내용 입 니 다.브 라 우 저 는 이 요청 을 직접 막 습 니 다.
2.동원 전략의 제한 을 깨 뜨 린 다.
브 라 우 저 는 ajax 가 비 동원 적 인 내용 을 요청 하 는 것 을 막 을 수 있 으 나,
// show_person.php
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function sayHello(person){
alert(person.name + ', your age is ' + person.age);
}
</script>
<script type="text/javascript" src="http://localhost:80/MongoTest/person.php" ></script>
</head>
<body>
</body>
</html>// person.php
<?php
$person = array('name' => 'kobe', 'age' => 34);
echo 'sayHello('.json_encode($person).')';
?>实际上，通过<script>标签就是将远程请求来的数据插入到<script></script>之间。访问80和81端口，都会得到希望得到的结果：kobe, your age is 34。
下面就看一下，动态添加<script>标签实现跨域请求数据。修改show_person.php：
// show_person.php
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function sayHello(person){
alert(person.name + ', your age is ' + person.age);
}
// 通过callback参数指定回调函数
var url = 'http://localhost:80/MongoTest/person.php?callback=sayHello';
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>// person.php
<?php
$person = array('name' => 'kobe', 'age' => 34);
echo $_REQUEST['callback'].'('.json_encode($person).')';
?>81 포트 를 통 해 접근 하면 결 과 를 출력 할 수 있 습 니 다.이 는 크로스 도 메 인 요청 을 실현 합 니 다.fireforx 의 firebug 나 chrome 의 js 콘 솔 을 통 해 html 요 소 를 볼 수 있 습 니 다.head 요소 에
<script src="http://localhost:80/MongoTest/person.php?callback=sayHello"></script>3. JSONP
실제로 위의 예 는 JSONP 의 단순 한 실현 이다.JSONP(JSON with Padding)는 서버 측 과 클 라 이언 트 가 서로 협력 하여 도 메 인 간 요청 을 완성 하 는 프로 토 콜 입 니 다.클 라 이언 트 가 서버 측 에 요청 을 보 내 고 callback 함 수 를 추가 합 니 다.서버 측 은 해당 하 는 js 코드 를 되 돌려 줍 니 다.이 코드 는 바로 리 셋 함 수 를 실행 하 는 것 입 니 다.매개 변 수 는 서버 측 이 돌아 오 는 JSON 데이터 입 니 다.위의 예 에서 person.php 는 서버 의 간단 한 실현 입 니 다.되 돌아 오 는 응답 내용 은?
sayHello({"name":"kobe","age":34})이 내용 은 클 라 이언 트 에 의 해 동적 으로 생 성 된 script 태그 내부 에 삽 입 됩 니 다.
클 라 이언 트 가 크로스 도 메 인 요청 을 할 때 구체 적 인 리 셋 함 수 를 만들어 야 합 니 다.예 를 들 어 이 요청 등 입 니 다.http://localhost:80/MongoTest/person.php?callback=sayHello콜백 은 리 셋 함수 이 고 서버 측 도 콜백 을 통 해 리 셋 함수 이름 을 추출 해 야 하기 때문에 구체 적 인 이 매개 변 수 는 클 라 이언 트 와 서버 측 이 일치 해 야 합 니 다.그렇지 않 으 면 크로스 필드 를 실현 할 수 없습니다.
jQuery 에 서 는 JSONP 에 대한 지원 이 있 습 니 다.jQuery.getJSON 방법 을 사용 할 때 들 어 오 는 url 의 형식 은 url?callback=?그러면 jQuery 는 자동 으로?구체 적 인 반전 함수 이름 으로 바 꿉 니 다.위의 예 기능 은 jQuery 를 사용 하여 다음 과 같이 고 칠 수 있 습 니 다.
$.getJSON('http://localhost:80/MongoTest/person.php?callback=?', function(data){
sayHello(data);
});jQuery17103600438670255244_1331202380099({"name":"kobe","age":34})
앞의 jQuery 17103600438670252441331202380099 는 jQuery 가 동적 으로 생 성 한 리 셋 함수 이름 입 니 다.그리고 이 리 셋 함수 내용 에서 뒤에 정 의 된 익명 함 수 를 호출 하여 얻 은 JSON 데 이 터 를 전송 합 니 다.jQuery 는 JSONP 요청 을 최적화 할 수 있 습 니 다.같은 원본 에 요청 을 하면 jQuery 는 일반 Ajax 요청 으로 전환 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[*기타*] 앱에서 외부 데이터 검색(JSONP편)앱에서 외부 서버의 데이터를 취하고 싶은 경우의 JSONP편. 일반적으로 다른 도메인에 대해 Ajax 통신을 시도하면 화가납니다. 이것을 크로스 도메인 제약이라고 한다. 그래도 외부 서버의 데이터를 가져오는 것이 필...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
