iframe 기반 ajax 크로스 도 메 인 요청 웹 페이지 의 ajax 데 이 터 를 가 져 옵 니 다.

4982 단어 ajax크로스 필드
서로 다른 도 메 인 에서 ajax 요청 을 보 낼 수 없다 는 것 을 잘 알 고 있 습 니 다.브 라 우 저 는 다음 과 같은 오 류 를 보고 합 니 다.

또한,내 장 된 iframe 에 서 는 도 메 인 간 통신 을 할 수 없습니다.즉,서로 다른 도 메 인 iframe 은 데 이 터 를 읽 을 수 없습니다(물론 hash 변 화 를 이용 하여 부모 window 에서 데 이 터 를 하위 iframe 으로 전송 할 수 있 지만 의미 가 없습니다).iframe 크로스 도 메 인 통신 시 브 라 우 저 는 다음 과 같은 오 류 를 보고 합 니 다.

사실 이 두 문 제 는 모두 도 메 인 을 뛰 어 넘 어서 생 긴 것 이다.
다음은 이 문 제 를 어떻게 해결 하 는 지 소개 한다.
문 제 는 브 라 우 저 가 ajax 요청 주 소 를 분석 할 때 현재 웹 페이지 의 주소 와 비교 하 는 것 입 니 다.도 메 인 을 뛰 어 넘 는 것 이 라면 삭제 하고 오 류 를 보고 하 는 것 을 금지 하 는 것 입 니 다.그러면 브 라 우 저가 분석 한 aax 주소 가 현재 웹 페이지 의 분석 주소 와 같다 면 브 라 우 저가 우리 의 요청 을 금지 하지 않 을 것 입 니 다.
그렇다면 브 라 우 저 는 url 을 어떻게 해석 합 니까?
먼저 브 라 우 저가 도 메 인 이름 을 방문 할 때 로 컬 DNS 캐 시 에 해당 하 는 ip 주소 가 있 는 지 확인 합 니 다.있 으 면 로 컬 에서 ip 주 소 를 가 져 와 서 방문 합 니 다.없 으 면 브 라 우 저 는 DNS 서버 에 DNS 를 보 내 도 메 인 이름 에 해당 하 는 ip 주 소 를 요청 한 다음 로 컬 캐 시 에 저장 하고 방문 합 니 다.
그러면 상기 문제 와 관련 하여 우 리 는 현지에서 도 메 인 이름 의 해석 방식 을 위조 한 다음 에 위 조 된 도 메 인과 목표 도 메 인 을 통 해 도 메 인 간 요청 을 하면 되 지 않 습 니까?
윈도 우즈 에서 C:\\Windows\System 32\\drivers\\etc 를 엽 니 다.
이 폴 더 아래 에 hosts 파일 이 있 습 니 다.hosts 를 바 꾸 면 구 글 의 친구 들 이 이것 에 대해 잘 알 것 입 니 다.hosts 파일 에 이런 코드 를 추가 합 니 다.
127.0.0.1         a.목표 사이트 주소.com
이렇게 하면 a.목표 사이트.com 을 방문 하 는 것 은 localhost 를 방문 하 는 것 과 같 습 니 다.이렇게 하 는 목적 은 로 컬 서 비 스 를 편리 하 게 구축 하 는 것 입 니 다.로 컬 서비스 와 목표 의 도 메 인 이름 사이 에 도 메 인 간 문제 가 존재 하지 않 습 니 다.그러면 로 컬 에서 목표 페이지 에 iframe 표지 판 을 삽입 하 는 방식 으로 목표 도 메 인 에 도 메 인 간 요청 을 하여 목표 도 메 인 데 이 터 를 얻 을 수 있 습 니 다.
코드 바로 올 리 기(jQuery 사용)
스 크 립 트 코드,부모 필드 에 직접 삽입

var mySrc = "http://a.    .com:9000/myIframe.html";

document.domain = "    .com";  //    ，       

$("body").append('<iframe src=' + mySrc + ' name="myIframe" id="getData"></frame>');  //       iframe

var interval;

function start() {
 $("#getData").attr({"src": mySrc});
 interval = setInterval(function() {
  window.myIframe.run(getLogitic); //           
 },10000)
}

function stop() {
 clearInterval(interval);
}

function getLogitic(orderId) {
 $.ajax({
  url: '/query?'+ orderId +'&id=1&valicode=&temp=' + Math.random(),
  method: 'GET',
  success: function(res) {
   console.log(res);    //            ，         
  },
  error: function(err) {
   console.log('err: ', err);
  }
 })
}
iframe 에서 html 코드

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="bower_components/jquery/dist/jquery.js"></script>
 <script>
  document.domain = "    .com"; //    ，        
  var int;
  function run(callback) {
  //            ，         ，                    ，         
   $.ajax({
    url: './getOrderList.json',//         ，       json  ，          
    method: 'GET',
    success: function(res) {
     var data = res.list;
     int = setInterval(function(){
      callback(data[0]); //           
      data.shift();
      if (data.length === 0) clearInterval(int);
     }, 1000);
    },
    error: function(err) {
     console.log(err)
    }
   })
  }
 </script>
</body>
</html>
주의:
iframe 을 루트 로 올 려 야만 부모 window 와 통신 할 수 있 습 니 다.귀 document.domain 명령 은 현재 도 메 인 을 현재 루트 로 올 릴 수 있 습 니 다.이것 도 로 컬 hosts 파일 을 수정 해 야 하 는 이유 입 니 다.이것 은 도 메 인 문 제 를 해결 하 는 근본 입 니 다.
대상 웹 페이지 데 이 터 를 캡 처 하기 전에 대상 웹 페이지 에서 ajax 요청 을 보 내 는 방식 을 보고 요청 한 api 를 받 아야 합 니 다.대상 웹 페이지 의 콘 솔 을 통 해 스 크 립 트 를 삽입 한 다음 에 실행 하고 얻 을 데 이 터 를 받 아 로 컬 요청 을 통 해 로 컬 로 보 냅 니 다.
다음은 모 물류 조회 홈 페이지 의 물류 정 보 를 캡 처 하 는 과정 입 니 다.
  • 지 워 진 것 이 목표 사이트 주소 입 니 다.이것 은 대상 웹 페이지 에 나의 스 크 립 트 를 삽입 하 는 것 입 니 다.성공 하면 웹 페이지 에 로 컬 주소 가 삽입 되 지만 도 메 인 이름과 대상 도 메 인 이 같은 iframe 입 니 다.

    • 결실
    이 데 이 터 는 요청 에 성공 하면 로 컬 로 전 송 됩 니 다.

    더 많은 하 이 라이트 내용 은《ajax 크로스 도 메 인 기술 집합》.을 클릭 하여 깊이 있 는 학습 과 연 구 를 진행 하 세 요.
    사실 편집장 님 도 처음 알 게 되 었 고 아직 공부 와 탐색 에 있어 서 여러분 과 함께 공부 하고 발전 하 기 를 바 랍 니 다.
    AJAX 와 JSP 혼합 사용 방법의 실례
    springboot 열 시작 과정 도해

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage