>  기사  >  웹 프론트엔드  >  크로스 도메인 JavaScript를 사용하는 이유는 무엇입니까?

크로스 도메인 JavaScript를 사용하는 이유는 무엇입니까?

WBOY
WBOY원래의
2022-03-24 17:10:112359검색

JavaScript 크로스 도메인이 발생하는 이유: 브라우저의 동일 출처 정책 제한, 현재 도메인 이름의 js는 동일한 도메인의 창 속성만 읽을 수 있으므로 크로스 도메인이 발생합니다. 동일 출처 정책은 사용자 정보의 보안을 보장하고 악의적인 웹사이트의 데이터 도용을 방지하기 위해 브라우저가 서로 다른 도메인 간의 JS 상호 작용을 금지한다는 것을 의미합니다.

크로스 도메인 JavaScript를 사용하는 이유는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

교차 도메인 JavaScript를 사용하는 이유는 무엇인가요?

교차 도메인 문제는 브라우저의 동일 출처 정책에 의해 제한됩니다. 현재 도메인 이름의 js는 동일한 도메인의 창 속성만 읽을 수 있습니다.

브라우저의 동일 출처 정책 제한으로 인해. 동일 출처 정책은 브라우저의 핵심이자 가장 기본적인 보안 기능입니다. 동일 출처 정책이 누락되면 브라우저의 정상적인 기능이 영향을 받을 수 있습니다. 웹은 동일 출처 정책을 기반으로 구축되었다고 할 수 있습니다. 브라우저는 동일 출처 정책을 구현한 것일 뿐입니다. 동일 출처 정책은 한 도메인의 JavaScript 스크립트가 다른 도메인의 콘텐츠와 상호 작용하는 것을 방지합니다. 소위 동일한 출처(즉, 동일한 도메인에 있음)는 두 페이지가 동일한 프로토콜, 호스트 및 포트 번호를 가지고 있음을 의미합니다.

간단히 말하면 동일 출처 정책은 사용자 정보의 보안을 보장하고 악성 웹사이트의 데이터 도용을 방지하기 위해 브라우저가 서로 다른 도메인 간의 JS 상호 작용을 금지한다는 것을 의미합니다. 브라우저의 경우 도메인 이름, 프로토콜 및 포트 중 하나가 다르면 동일 출처 정책이 실행되어 이들 간의 다음 상호 작용이 제한됩니다.

1. 쿠키, LocalStorage 및 IndexDB를 읽을 수 없습니다.

2. DOM을 읽을 수 없습니다.

3.AJAX 요청을 보낼 수 없습니다.

크로스 도메인의 엄격한 정의는 다음과 같습니다. 프로토콜, 도메인 이름, 포트가 다른 한 크로스 도메인으로 간주됩니다.

교차 도메인 솔루션

JSONP: 요청 메소드에 dataType: "jsonp"를 추가해야 합니다. //데이터 형식은 jsonp, jsonp:"callback"으로 설정됩니다. //확인 매개변수 이름 Jquery

1, dataType에 의해 생성됩니다. 이 매개변수는 jsonp

2, jsonp로 설정되어야 하며, 이 매개변수의 값은 서버 측

nginx 역방향 프록시

webpack과 동의해야 합니다. 역방향 프록시 구성: 직접 사용 역방향 프록시를 구성하기 위한 스캐폴딩 devServer 개발 프로세스의 도메인 간 문제 해결

CORS(교차 도메인 리소스 공유)

nodejs 크로스 도메인: nodejs를 사용하여 로컬에서 서버를 설정합니다. 데이터를 반환한 다음 프런트엔드로 반환합니다. 서버 간 연결이 없습니다. Cross-domain

WebSocket 프로토콜 cross-domain

JSONP를 통해

직접 이해하세요. JSONP는 스크립트의 src 속성을 사용합니다. 태그를 사용하여 도메인 간을 달성할 수 있으며 백그라운드에서는 이 방법을 사용할 수 있습니다. 원하는 데이터 가져오기

jsonp 원칙 프런트 엔드는 메서드를 정의하고 이를 전달합니다. src 속성을 통해 백엔드에서 메서드를 얻은 후 데이터 접합 메서드를 전달한 다음 프런트엔드에서 이를 메서드로 호출합니다

JSONP는 주로 캡슐화됩니다. 요청 콜백을 추가하는 방법, 이 콜백은 프런트엔드와 백엔드에서 합의됩니다.

관련 권장 사항:

javascript 학습 튜토리얼

위 내용은 크로스 도메인 JavaScript를 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.