JavaScript의 도메인 간 문제에 대한 솔루션 공유
- 黄舟원래의
- 2017-07-18 10:02:191373검색
이 글에서는 주로 자바스크립트 크로스 도메인 문제 및 해결 방법에 대한 관련 정보를 소개합니다. 도움이 필요한 친구는
자바스크립트 크로스 도메인 문제 및 해결 방법
크로스 도메인 문제란 무엇인가요?
이 크로스 도메인 문제는 브라우저의 동일 출처 정책으로 인해 발생합니다. 요청한 URL 주소는 브라우저의 URL과 동일한 프로토콜, 동일한 도메인 이름, 동일한 포트여야 합니다. 그렇지 않으면 액세스가 허용되지 않습니다
| 브라우저 URL | 액세스할 URL | Result |
|---|---|---|
| http://www.123.com/index | http://www.123.com/server | Success |
| http://www.123.com/index | http://www.456.com/server | 도메인 이름이 다르며 도메인 간 |
| http://www.123.com: 8080/index | http://www.123.com:8888/index.htm | 다른 포트, 도메인 간 |
| http://www.123.com/index | https://www .123.com /index | 다양한 프로토콜, 도메인 간 |
솔루션
script, img, iframe 태그와 같이 src 속성이 있는 모든 태그는 도메인 간 가능
JSONP
JSONP는 스크립트 태그의 응용 프로그램으로 JSONP의 전체 이름은 JSON With Padding입니다. JSONP는 콜백 함수와 데이터의 두 부분으로 구성됩니다. 콜백 함수는 응답이 도착할 때 호출되어야 하는 함수입니다. 데이터는 콜백 함수에 전달된 JSON 데이터입니다
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function jsonCallback(data){
alert(data);
};
var url = "http://localhost:8888/test?callback=jsonCallback";
var script = document.createElement('script');
script.type = "text/javascript";
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>단점: JSONP 요청 실패 여부를 확인하기가 쉽지 않습니다
보안 문제, JSONP 코드 실행을 위해 다른 도메인에서 로드되므로 신뢰성을 확인하세요
도메인 간 문제가 발생하는 이유
도메인 간 문제는 브라우저의 동일 출처 정책 제한으로 인해 현재 도메인 이름의 js는 읽기만 가능합니다. 동일한 도메인의 창 속성.
교차 도메인 문제에 대한 시나리오
다른 웹사이트에서 데이터를 얻기 위해 페이지에서 js를 사용하면 웹사이트에서 ajax를 사용하여 다른 웹사이트에서 날씨, 익스프레스 또는 기타 데이터 인터페이스를 요청할 때와 같이 도메인교차 문제가 발생합니다. 그리고 하이브리드 앱에서 데이터를 요청하면 브라우저에 다음 오류가 표시됩니다. 이 시나리오에서는 js의 도메인 간 문제를 해결해야 합니다.
XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access.
어떤 상황에서 도메인 간 문제가 발생하나요?
웹사이트의 URL에는 프로토콜 이름, 하위 도메인 이름, 기본 도메인 이름, 포트 번호가 포함됩니다. 예를 들어, https://github.com/, 여기서 https는 프로토콜 이름, www는 하위 도메인 이름, github는 기본 도메인 이름, 포트 번호는 80입니다. 페이지의 URL에서 데이터를 요청할 때, 이 URL의 프로토콜 이름, 하위 도메인 이름, 기본 도메인 이름, 포트 번호 중 하나라도 다를 경우 도메인 간 문제가 발생합니다.
http://localhost:80/ 페이지 요청 http://127.0.0.1:80/에도 도메인 간 문제가 있습니다
크로스 도메인 문제 해결
크로스 도메인 문제를 해결하는 방법은 다음과 같습니다.
jsonp 사용
서버 프록시
서버는 요청 헤더에 Access-Control-Allow-Origin을 설정하여 데이터를 얻을 수 있는 도메인 이름을 지정합니다.
jsonp의 솔루션
json≠jsonp
원칙
원칙 크로스 도메인 문제를 해결하는 jsonp 예, 브라우저의 스크립트 태그는 동일한 원본 정책에 의해 제한되지 않습니다(웹 페이지에서 스크립트의 src 속성을 설정하여 CDN 서버의 정적 파일 경로를 요청할 수 있습니다). 그런 다음 스크립트 태그를 사용하여 요청할 때 callbakc=?라는 매개변수를 추가합니다. 여기서 ?는 실행하려는 콜백 메서드입니다.
위 내용은 JavaScript의 도메인 간 문제에 대한 솔루션 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!