Gidhub BE Developer

CORS 개념 및 해결책

2018-07-23
goodGid
Web

CORS란 무엇인가

  • CORS란 Cross Origin Resource Sharing의 약자로
    현재 도메인과 다른 도메인으로 리소스가 요청될 경우를 말한다.

  • 예를 들어 도메인 http://A.com 에서 읽어온 HTML페이지에서
    다른 도메인 http://B.com/image.jpg 를 요청하는 경우이다.

  • 이런 경우에 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다.

  • 보안 상의 이유로 브라우저는 CORS를 제한하고 있다.

  • 하지만 SPA(Single Page Application)의 경우에는
    RESTful API를 기반으로 비동기 네트워크 통신을 하기 때문에
    API 서버와 웹 페이지 서버가 다를 수 있다.

  • 이런 경우에 API 서버로 요청을 할 시에 CORS 제한이 걸리게 된다.


해결책

Access-Control-Allow-Origin

  • 이를 해결하기 위해서 가장 간단한 방법은 서버(API 서버)의 응답 헤더를 변경해주는 것이다.

  • 서버의 헤더 중에는 Access-Control-Allow-Origin 프로퍼티가 있다.

  • 이 프로퍼티에 CORS를 허용해 줄 도메인을 입력하는 곳이다.

  • 모든 곳에서 CORS를 허용하기 위해서는 모두를 의미하는 *를 입력하면 된다.


- Example -
if( 모든 곳에 CORS를 허용 )
Access-Control-Allow-Origin: *

if( 특정 도메인에만 허용하길 원한다면 )
Access-Control-Allow-Origin: http://A.com, http://B.com, ...

Reference


Index