크로스 도메인에 대한 자세한 소개

교차 도메인 전략을 배우려면 먼저 교차 도메인 이유를 알아야 합니다.

　 브라우저의 동일 출처 정책은 교차 사이트 스크립팅 공격을 방지하기 위해 클라이언트 측 스크립트(예: JavaScript)가 교차 도메인을 생성하는 것을 금지합니다. -다른 도메인의 서비스에 대한 사이트 호출.

좀 더 구체적으로 말하면, 웹사이트에서 요청한 프로토콜 이름, 호스트, 포트 번호 중 하나가 다를 경우, 웹사이트 간 데이터 전송은 크로스 도메인 호출을 형성하게 됩니다.

이 기사의 모든 예제는 Node.js를 서버로 사용하여 수행됩니다. 동시에 다른 포트 번호 3001과 3002를 사용합니다.

먼저 그림과 같이 양식을 작성합니다.

　

일반적인 도메인 간 요청이 아닌 경우 일반적으로 다음과 같습니다.

html

:

Front-end js part (ajax)

:

서버 코드:

참고: Node.js의 강력한 모듈을 사용하여 여기에서 post 메소드의 내용을 읽습니다.

요청 페이지에서 반환된 결과는 다음과 같습니다.

현재 반환 결과는 포트 3001에 액세스하는 데 속하므로 포트 3002에 액세스하면 어떻게 될까요?

예! 이것이 그가 된 것입니다! 그는 포트 번호를 통한 액세스를 허용하지 않습니다! ! !

그러나 서버 콘솔에는 다음과 같은 출력이 있습니다.

이게 무슨 뜻인가요? 다음으로 코드를 첨부해서 차근차근 설명하자면:

ajax 요청 부분 값이 수정되었습니다.

url

부분:

즉, 포트 번호 3001이 3002로 바뀌었고 나머지는 정확히 위와 동일합니다.

서버 코드는 위와 동일하지만 포트 3002를 수신합니다.

코드를 통해 알 수 있는 것은 포트 번호가 달라도 ajax의 서버는 여전히 프런트에서 데이터를 받아,

즉, 위의 컨트롤은 스테이션에서 출력된 데이터를 보면 서버가 Cross-Site 요청을 거부한 것이 아니라, 수신 시 브라우저에 의해 서버가 차단된 것을 알 수 있습니다. 데이터를 수집하고 반환을 처리합니다.

물론 도메인 간 제한을 해결하는 방법에는 여러 가지가 있으며 그 중 4가지를 소개합니다.

　

　1. JSONP를 사용하여 도메인 간 호출 구현

　먼저 JSONP를 한 단락으로 소개하겠습니다. :

　　JSONP는 JSON의 일부입니다. 이 사용 모델은 주류 브라우저의 도메인 간 데이터 액세스 문제를 해결할 수 있습니다. 원칙은 XmlHttpRequest 객체는 동일 출처 정책의 영향을 받지만 <script> 태그 요소는 동일 출처 정책의 영향을 받지 않는다는 것입니다. 다른 소스의 JSON 데이터. JSONP를 사용하여 얻은 <strong>은 JSON 데이터가 아니라 직접 실행할 수 있는 JavaScript 문입니다. ㅋㅋㅋㅋㅋ　　　　　　ucledie in $ajax by Jquery 이때 브라우저 콘솔에는 다음과 같이 출력됩니다. </script>

呢 呢 이때 서버의 요청 수신 방법은 get이지만 요청에 의해 발행된 Ajax 방법은 다음과 같습니다. 포스팅이 왜요? 다음 내용을 살펴보세요.

　　　

　　　이것은 위 요청의 http 헤더 정보입니다. URL은 실제로 get 메소드에 따라 매개변수를 전달하므로 서버는 get 메소드를 사용하여 데이터를 수락합니다.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　nel 아래로 앞으로 위로 통과하여 공중에서 | /localhost:3 001/blog?callback=jsonpCallback&name=%E5%BC%A0%E4%B8%89&id=05142075&_=1496753697939'

　　　

(2) js 네이티브<script>를 사용하여 jsonp를 구현합니다.　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 us in us in in in / in / in in in on in in on in in on in on in the head node.” jsonp 위 동일);<p><strong>　　　기본 스크립트 태그 방법을 통해 jsonp에는 다음과 같은 단점이 있음을 알 수 있습니다.　　1. 요청을 보낼 때는 get 메서드만 사용할 수 있습니다<p>　　2. 동시에 이 방법은 ajax와는 아무런 관련이 없으므로 모니터 상태를 모니터링하기 위한 Event를 등록할 수 없으며 오류를 쉽게 감지할 수 없습니다. <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/58938c43a6f83f55c932e2936e4cb3bf-13.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>　2.CORS는 도메인 간 호출을 구현합니다<p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/58938c43a6f83f55c932e2936e4cb3bf-14.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>　　　CORS를 소개하기 위해 다른 단락을 빌려 보겠습니다:<p><p><p>　　　 Cross-Origin Resource Sharing(CORS)은 브라우저 기술의 사양입니다. 브라우저의 동일 출처 정책을 피하기 위해 웹 서비스가 다른 도메인에서 샌드박스 스크립트를 전송하는 방법을 제공합니다. 이는 JSONP 모드의 최신 버전입니다. JSONP와 달리 CORS는 GET 요청 방법 외에도 다른 HTTP 요청도 지원합니다. <p>　　　CORS를 사용하면 웹 디자이너가 일반 XMLHttpRequest를 사용할 수 있습니다. 이 방법은 JSONP보다 오류 처리가 더 좋습니다. 반면 JSONP는 CORS를 지원하지 않는 이전 브라우저에서 작동합니다. 최신 브라우저는 CORS를 지원합니다. ㅋㅋㅋㅋㅋㅋ　　　　　　　　　　　　　　　　　 Ajax 요청 코드: <p> 서버 코드: <strong> 요청 반환 결과: <p> ​​​​<strong> <strong>​​​ ​​자, 이것으로 CORS의 도메인 간 호출이 완료되었습니다. 매우 간단하지 않습니까? ㅋㅋㅋㅋㅋ　　　　　　　　　　　　　logue in in >> http 헤더 정보에서 서버가 데이터를 리턴할 때 가장 중요한 것은 Access-Control-Allow-Origin, <br/>　　　　이며, 이 헤더 정보는 요청 당시의 도메인 이름 값을 나타내며, 나머지는 CROS 관련 세부 정보를 통해 학습할 수 있습니다. CORS의 경우 이러한 <p>　　　헤드 메시지만 작성하면 브라우저가 나머지 작업을 완료합니다. <p>　　　CROS의 장점은 분명합니다. 다중 모드 요청, get, post, put 등을 지원할 수 있습니다. 전송에는 여전히 XmlHttpRequest를 사용합니다.<p>　　　이벤트를 등록하여 상태를 모니터링할 수 있으며 오류 처리가 좋습니다. <p>　　　물론 그 자체의 단점도 있습니다. 즉, 하위 버전의 브라우저를 지원하지 않는다는 것입니다.　　<p></script>

위 내용은 크로스 도메인에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!