브 라 우 저 크로스 도 메 인 을 완벽 하 게 해결 하 는 몇 가지 방법(집합)
페이지 에서 js 를 사용 하여 다른 사이트 의 데 이 터 를 방문 할 때 크로스 도 메 인 문제 가 발생 합 니 다.예 를 들 어 사이트 에서 ajax 를 사용 하여 다른 사이트 의 날씨,택배 또는 다른 데이터 인 터 페 이 스 를 요청 할 때 하 이브 리드 app 에서 데 이 터 를 요청 하면 브 라 우 저 는 오 류 를 알려 줍 니 다.
XML HttpRequest cannot load http:/요청 한 도 메 인 이름 입 니 다.No'Access-Control-Allow-Origin'header is present on the required resource.Origin'http:/현재 페이지 의 도 메 인 이름'is therefore not allowed access.
2.왜 크로스 필드 문제 가 발생 합 니까?
브 라 우 저 는 같은 소스 정책 의 제한 을 받 기 때문에 현재 도 메 인 이름 의 js 는 같은 도 메 인 아래 의 창 속성 만 읽 을 수 있 습 니 다.
동원 정책:서로 다른 도 메 인 이름,서로 다른 포트,서로 다른 프로 토 콜 은 자원 을 공유 할 수 없고 브 라 우 저의 안전 을 보장 합 니 다.
브 라 우 저 에 대한 원본 정책 시침 의 문턱 입 니 다.탐색 을 돌 면 크로스 도 메 인 을 실현 할 수 있 기 때문에 초기의 크로스 도 메 인 은 모두 안전 한 경로 의 에지볼 을 쳤 고 모두 hack 처리 라 고 볼 수 있 습 니 다.
3.이제 크로스 도 메 인 을 해결 하 는 몇 가지 방법 을 정리 합 니 다.
jsonp 크로스 도 메 인 방법
우 리 는 script 탭 을 제공 합 니 다.요청 페이지 의 데 이 터 를 요청 하 는 동시에 리 셋 함수 의 이름 을 입력 합 니 다.서버 에서 이름 을 얻 은 후,함수 실행 형식의 문자열 을 연결 합 니 다.브 라 우 저 로 보 냅 니 다.script 은 코드 를 다운로드 한 후에 실 행 됩 니 다.실 행 된 것 은 바로 이 함수 호출 형식의 문자열 입 니 다.그래서 로 컬 함 수 를 호출 했 습 니 다.서버 에서 얻 은 데 이 터 를 동시에 얻 었 습 니 다.
window.name
window 대상 의 name 속성 은 매우 특별한 속성 입 니 다.이 window 의 location 이 변 한 후에 다시 불 러 옵 니 다.name 속성 은 변 하지 않 을 수 있 습 니 다.그러면 우 리 는 페이지 A 에서 iframe 으로 다른 도 메 인 페이지 B 를 불 러 올 수 있 습 니 다.페이지 B 에 서 는 JavaScript 로 전달 할 데 이 터 를 windows.name,iframe 에 불 러 온 후에 페이지 A 는 iframe 의 주 소 를 수정 하여 같은 도 메 인 주소 로 만 든 다음 에 window.name 의 값 을 읽 을 수 있 습 니 다.이 방식 은 단 방향 데이터 요청 에 매우 적합 하고 협의 가 간단 하 며 안전 하 다.JSONP 처럼 외부 스 크 립 트 를 제한 없 이 실행 하지 않 습 니 다.
document.domain
document 의 domain 속성 을 수정 함으로써 도 메 인과 도 메 인 또는 서로 다른 도 메 인 간 에 통신 할 수 있 습 니 다.같은 도 메 인 정책 은 도 메 인과 하위 도 메 인 이 서로 다른 도 메 인 에 속한다 고 생각 합 니 다.예 를 들 어 www.a.com 과 sub.a.com 은 서로 다른 도 메 인 입 니 다.이때 우 리 는 www.a.com 아래 페이지 에서 sub.a.com 에서 정의 하 는 자바 스 크 립 트 방법 을 호출 할 수 없습니다.그러나 document 의 domain 속성 을 a.com 으로 수정 하면 브 라 우 저 는 같은 도 메 인 에 있다 고 생각 합 니 다.그러면 우 리 는 서로 상대방 의 method 를 호출 하여 통신 할 수 있 습 니 다.
window.postMessage
window.postmessage 는 HTML 5 가 정의 한 새로운 방법 으로 이 방법 은 window 를 통 해 편리 하 게 통신 할 수 있다.새로운 방법 이기 때문에 오래된 브 라 우 저 와 오래된 브 라 우 저 에 서 는 사용 할 수 없습니다.
서버 코드 를 통 해 도 메 인 을 뛰 어 넘 습 니 다(정방 향 프 록 시,역방향 프 록 시)
정방 향 프 록 시:저 는 제 서버 와 데이터 서버 처럼 데 이 터 를 보 냅 니 다.제 서버 는 데이터 서버 에 get 요청 만 보 내 면 됩 니 다.
역방향 프 록 시:정방 향 프 록 시 와 유사 하지만 스 크 립 트 를 빌 리 지 않 고 서버 맵 url 을 직접 사용 합 니 다.
우리http://studyit.com
데이터 서버 의 url 은?http://api.botue.com/login
apache 에 url 프 록 시 맵 을 설정 합 니 다.
이론 적 으로 url 사용:http://studyit.com/api 사이트 루트 디 렉 터 리 에서 api 폴 더 를 찾 습 니 다.
하지만 현재 apache 는/api 를 매 핑 하 는 기능 을 제공 합 니 다.http://api.botue.com
이 맵 이 있 으 면 접근 합 니 다.http://api.botue.com/login /api/login 을 이용 하여 방문 할 수 있 습 니 다.
역방향 에이전트 의 장점:
크로스 도 메 인(서버 가 도와 준 것)을 실현 할 뿐만 아니 라 데 이 터 를 방문 할 때 마치 로 컬 서버 를 방문 하 는 것 과 같 습 니 다.그러면 쿠키 등 데 이 터 를 직접 얻 을 수 있 습 니 다.
역방향 프 록 시 를 어떻게 사용 합 니까?
1)httpd.conf 설정 파일 을 찾 아 porxy 로 시작 하 는 두 모듈 로 딩 항목 을 찾 습 니 다.설명 을 삭제 합 니 다.
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
2)가상 호스트 의 설정 파일 을 찾 습 니 다.역방향 프 록 시 를 하려 면 설정 파일 을 수정 하고 가상 호스트 의 설정 에 두 가지 옵션 을 추가 합 니 다.
ProxyRequests Off
ProxyPass /abc http://test2.com
3)서버 재 부팅
CORS 크로스 필드
CORS 는 es5 이후 에 제 시 된 크로스 도 메 인 방안 입 니 다.서버 에 크로스 도 메 인 응답 헤드 인 터 페 이 스 를 설정 해 야 합 니 다.
jsonp 에 비해 장점:
1.JSONP 는 GET 요청 만 수행 할 수 있 고 CORS 는 모든 유형의 HTTP 요청 을 지원 합 니 다.
2.CORS 를 사용 하면 개발 자 는 일반적인 XMLHttpRequest 를 사용 하여 JSONP 보다 더 좋 은 오류 처 리 를 요청 하고 데 이 터 를 얻 을 수 있 습 니 다.
3.JSONP 는 주로 오래된 브 라 우 저 에 의 해 지원 되 는데 그들 은 CORS 를 지원 하지 않 고 대부분 현대 브 라 우 저 는 CORS 를 지원 합 니 다.
코드 는 다음 과 같 습 니 다:
클 라 이언 트:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn"> </button>
<script src="./jquery-3.2.0.js"></script>
<script>
$( '#btn' ).click(function () {
$.ajax( {
url: 'http://test2.com/03-index.php',
success: function ( info ) {
console.log( info );
}
});
});
</script>
</body>
</html>
<?php
// header( 'Access-Control-Allow-Origin: *' ); //
header( 'Access-Control-Allow-Origin: http://test1.com' );//
echo 'cors ';
?>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
DWR 학습 노트 - HelloWorld 편브 라 우 저 에 있 는 자바 script 코드 를 웹 서버 에 있 는 자바 로 호출 할 수 있 습 니 다. 브 라 우 저 에서 실행 되 는 자바 script 은 요청 을 보 내 고 페이지 를 동적 으로 변경 할 수...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
