도메인 간 요청(JSONP, CORS)에 대한 완벽한 솔루션(그림 및 텍스트 튜토리얼, 코드 포함)

이제 교차 도메인 요청(JSONP, CORS)에 대한 완벽한 솔루션을 제공하겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

잘 알려진 문제는 Ajax가 일반 파일을 직접 요청하여 도메인 간 무단 액세스가 발생한다는 것입니다. 솔루션에는 JSONP, Flash 등이 포함됩니다.

JSONP

웹 페이지에서 js 파일을 호출하는 것은 크로스 도메인인지 여부에 영향을 받지 않는 것으로 나타났습니다. "src" 속성이 있는 모든 태그에는 , ,

jQuery는 JSONP 호출을 지원합니다. 다른 도메인 이름에 콜백 함수 이름을 지정한 후 다음 형식을 사용하여 JSON 데이터를 로드할 수 있습니다.

url?callback=?
jQuery.getJSON(url + "&callback=?", function(data) { 
 alert(data.a + data.b); 
});

물론 서버는 JSONP 지원도 제공해야 합니다. 실제로는 읽기 및 쓰기 콜백 매개변수만 제공하면 됩니다.

Cross-Origin Resource Sharing(CORS)

Cross-Origin Resource Sharing(CORS)은 도메인 전체에서 리소스에 액세스할 때 브라우저와 서버가 브라우저와 서버 간에 통신하는 방법을 정의하는 W3c 작업 초안입니다. CORS의 기본 아이디어는 사용자 정의 HTTP 헤더를 사용하여 브라우저와 서버가 서로를 이해하고 요청 또는 응답이 성공했는지 여부를 확인할 수 있도록 하는 것입니다.

CORS는 JSONP보다 더 발전되고 편리하며 안정적입니다.

1. JSONP는 GET 요청만 구현할 수 있는 반면 CORS는 모든 유형의 HTTP 요청을 지원합니다.

2. 개발자는 CORS를 사용하여 일반 XMLHttpRequest를 사용하여 요청을 시작하고 데이터를 얻을 수 있으며 이는 JSONP보다 오류 처리가 더 좋습니다.

3. JSONP는 주로 CORS를 지원하지 않는 오래된 브라우저에서 지원되지만 대부분의 최신 브라우저는 이미 CORS를 지원합니다.

사용자 정의 헤더가 없는 간단한 요청의 경우 GET 또는 POST를 사용하고 본문은 text/plain이며 요청은 Origin이라는 추가 헤더와 함께 전송됩니다. Origin 헤더에는 요청한 페이지의 헤더(프로토콜, 도메인 이름, 포트)가 포함되어 있어 서버가 응답을 제공해야 하는지 여부를 쉽게 결정할 수 있습니다.

서버 측은 주로 Access-Control-Allow-Origin을 설정하여 CORS를 지원합니다.

헤더 세트 Access-Control-Allow-Origin *

XSS가 우리 서버를 공격하는 것을 방지하기 위해

Access-Control-Allow-Origin: http:/와 같은 도메인을 제한할 수 있습니다. /www.jb51.net

많은 서비스가 이미 CORS 지원을 제공합니다. 예를 들어 AWS는 도메인 간 리소스 공유 기능 CORS를 지원하며 S3에 업로드하는 데 프록시가 필요하지 않습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JavaScript에서 Alert() 메서드를 재정의하는 기술 분석에 중점을 둡니다.

JavaScript의 기본 구문 및 변수에 대한 설명

Javascript 시뮬레이션 오버로딩, toString 다시 작성에 대한 자세한 답변 방법

위 내용은 도메인 간 요청(JSONP, CORS)에 대한 완벽한 솔루션(그림 및 텍스트 튜토리얼, 코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!