Table of Contents

자바스크립트 브라우저 크로스 도메인 이슈 해결 방법

문제

자바스크립트에서 다른 도메인의 리소스를 사용할 때 크로스 도메인 이슈가 발생한다. 이는 보안상의 이유로 브라우저에서 인식되어 발생하는 문제이다. 예를 들어, 다른 도메인의 이미지나 데이터를 Ajax로 요청하는 경우, 브라우저는 보안상의 이유로 이를 차단한다.

해결 방법

크로스 도메인 이슈를 해결하기 위해서는 몇 가지 방법이 있다.

1. JSONP (JSON with Padding)


function handleResponse(data){
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleResponse';
document.body.appendChild(script);

JSONP는 callback 함수를 이용하여 다른 도메인으로부터 데이터를 받아온다. callback 함수 이름을 인자로 전달하여, 해당 함수에서 다른 도메인으로부터 받아온 데이터를 처리할 수 있다.

2. CORS (Cross-Origin Resource Sharing)

CORS는 다른 도메인으로부터 리소스를 요청할 때, 브라우저와 서버 간에 헤더를 이용하여 권한을 검사하는 방법이다.


var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    console.log(xhr.responseText);
  }
};
xhr.send();

CORS를 사용하기 위해서는 먼저 서버 측에서 헤더 설정이 필요하다. 서버 응답 헤더에는 Access-Control-Allow-Origin과 같은 헤더가 있어야 한다.