CORS (Cross-Origin Resource Sharing)이란 현재 도메인의 리소스를 다른 도메인에서 접근하도록 권한을 설정하도록 브라우저에 알려주는 메커니즘이다.

예를 들어 http://domain-abc.com의 자바스크립트에서 XMLHttpRequest를 이용해여 http://domain-def.com/assets/data.json을 요청할 때 이를 허용할지 말지를 결정하는 것이다.

기본적으로는 다른 도메인으로부터의 리소스 접근 요청을 허용하지 않고, 다른 도메인의 리소스를 접근하지 못하게 되어 있다. 이를 해결하는 방법은 서버마다 다르다.

nginx에서는 기본적으로 Access-Control-Allow-Origin을 이용해 접근을 허용할 수 있다.

예를 들자면 nginx.conf에 다음과 같은 방식으로 구문을 추가하면 된다.

server {
  ...
  location / {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
  }
  ...
}

당연하겠지만, location / 인지 location ~* \.(gif|jpg|swf)$ 인지 등은 서버 설정마다 다르다.

위의 예시에서 'Access-Control-Allow-Origin' '*'은 모든 도메인에서의 접근을 허용한다는 뜻이고, 만약 도메인을 제한하고 싶다면, 'Access-Control-Allow-Origin' 'http://domain-abc.com' 등으로 명시하면 된다.

그 아래 항목들도 각각 메소드, 헤더를 명시한 것이므로 상황에 맞게 사용하면 된다.