[Web]# 크로스 도메인 / 동일 출처 정책 : CORS, SOP

크로스 도메인 / 동일 출처 정책(SOP:Same Origin Policy)

AJAX 호출 시 보안상 이유로 동일 서버 이외에는 막히는 문제 발생

도메인이 다른 곳에서 자바스크립트에 접근하려 할때 거부

해결책 여러개 있음.

• document.domain으로 설정
• 도메인은 같으나 서브도메인이 다른 경우
• http://a.tistory.com이랑 http://b.tistory.com 이런 경우

• jsonp 콜백 함수 사용 JSONP(JSON with Padding)
• jsonp는 SOP를 해결하기 위해 사용 되는 방법
• jquery의 getJSON(url주소?파라미터&callback=?), 익명 callback함수)

$.getJSON("http://ssben.tistory.com/jsonp.json?callback=?",
  function(data) {
    console.log('callback data = ', data);
  }
);

• 또는 ajax 콜 할 때 dataType에 jsonp이랑 callback 넣어줌
• 아니면 호출시 success 함수로 구현

$('a').click(function() {
  $.ajax({
    url: "http://ssben.tistory.com/jsonp.json",
    dataType: 'jsonp',
    success: function(data) {
      console.log('success ', data);
    },
    error: function(xhr) {
      console.log('error ', xhr);
    }
  });
});

• 서버에서 해결하려면 CORS(Cross-Origin Resource Sharing)
• CORS로 외부 요청을 허용할 경우 사용 가능
• preflight라는 사전 요청을 보내야 함
• 모든 요청 / 선별적 허용이 가능