AJAX 요청에 대한 CORS 허용하기

Origin이란?

Origin은 아래와 같이 protocol, host, port 3개 부분으로 구성된다.

http://www.jsonobject.com:8080/
# protocol: http
# host: www.jsonobject.com
# port: 8080
  • 2개의 Origin을 비교시 3개 부분 중 단 1개만 일치하지 않아도 서로 다른 Origin이 된다. 즉, http, https의 차이, 80, 8080의 차이만 나도 서로 다른 Origin이 된다.

브라우저에서 현재 페이지의 Origin 알아내기

브라우저에서 현재 페이지의 정확한 Origin을 알고자 한다면 JavaScript에서 아래 명령을 실행한다.

# IE를 제외한 모든 브라우저
window.location.origin

# IE
window.location.protocol + '//' + window.location.hostname + ':' + window.location.port
  • 브라우저에 따라 현재 페이지의 Origin을 획득하는 방법은 위와 같이 2가지로 구분된다.

CORS

기본적으로 브라우저는 현재 페이지에서 Origin이 다른 URL로의 AJAX 요청을 원천적으로 차단한다.


  • 사실 브라우저는 Origin이 다른 URL에 대한 AJAX 요청 후 응답을 이미 받은 상태로 응답 헤더 CORS 정보를 확인하여 차단하는 것이다.

  • CORS란 무엇일까? CORS(Cross Origin Resource Sharing)는 서로 다른 Origin 간의 AJAX 요청-응답을 서버에서 제어할 수 있도록 만들어진 W3C의 표준이다. 요청을 받는 서버 측은 CORS 정책을 명시하여 클라이언트에 따라 AJAX 요청을 허용할지 말지를 결정할 수 있다.

  • 최근 유행하는 토큰 인증 기반의 웹 애플리케이션의 구조는 페이지(https://app.jsonobject.com) 상에서 API 서버(https://api.jsonobject.com)로 바로 AJAX 요청을 하는 구조로 진행되기에 AJAX 요청을 받는 서버 측에서 클라이언트의 Origin을 허용하는 작업이 필요하다. 서버에서 응답 헤더에 아래 정보를 추가하면 된다.
# AJAX 요청을 허용할 클라이언트의 Origin을 명시한다.
Access-Control-Allow-Origin: https://app.jsonobject.com

# Origin의 구분 없이 모든 클라이언트로부터 AJAX 요청을 허용한다.
Access-Control-Allow-Origin: *

참고 글

저작자 표시 비영리 동일 조건 변경 허락
신고