도메인 간 기술(JSONP 및 CROS)

JSONP

웹 페이지에서 js 파일을 호출하는 것은 크로스 도메인인지 여부에 영향을 받지 않습니다. "src" 속성이 있는 모든 태그에는 <와 같은 크로스 도메인 기능이 있습니다. ;script>, ,

function dll(response){
    alert(response.city);
}
var script=document.createElement("script");
script.src="http://freegeoip.net/json/?callback=dll";
document.body.insertBefore(script,document.body.firstChild);

3단계: 스크립트 작성, src 지정, 문서에 삽입.

jQuery는 JSONP 호출을 지원합니다. 다른 도메인 이름에 콜백 함수 이름을 지정한 후 다음 형식을 사용하여 JSON 데이터를 로드할 수 있습니다.
url?callback=?
jQuery.getJSON(url + "&callback=?", function(data) {
Alert(data.a + data.b);
});
물론 서버는 JSONP 지원도 제공해야 합니다. 실제로는 읽기 및 쓰기 콜백 매개변수만 제공하면 됩니다.
CORS(Cross-Origin Resource Sharing)
CORS(Cross-Origin Resource Sharing)는 도메인 전체에서 리소스에 액세스할 때 브라우저와 서버가 통신하는 방법을 정의하는 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://blog와 같은 도메인을 제한할 수 있습니다. .csdn.net
많은 서비스가 이미 CORS 지원을 제공합니다. 예를 들어 AWS는 도메인 간 리소스 공유 기능 CORS를 지원하며 S3에 업로드하는 데 프록시가 필요하지 않습니다.