[단순용어] CORS 와 Access-Control-Allow-Origin

CORS (Cross-Origin Resource Sharing)

CORS (Cross-Origin Resource Sharing)는 웹 브라우저에서 실행되는 스크립트가 다른 도메인의 자원에 접근할 수 있는 권한을 부여하는 보안 기능입니다.

 

일반적으로 웹 브라우저에서는 동일한 도메인에서 실행되는 스크립트만 다룰 수 있습니다. 하지만 때로는 다른 도메인의 자원에 접근해야 하는 경우가 있습니다. 이 경우 웹 브라우저에서는 보안 상의 이유로 이를 차단합니다. CORS는 이러한 보안상의 이유로 인해 다른 도메인의 자원에 접근하는 것을 허용하기 위한 규약을 제공합니다.

 

CORS는 HTTP 헤더를 사용하여 도메인 간 자원 공유를 제어합니다. 서버는 *Access-Control-Allow-Origin 헤더를 사용하여 다른 도메인에서 요청이 허용되는지 여부를 나타냅니다. 브라우저는 이 헤더를 확인하여 요청이 허용되는 경우에만 응답을 받아들입니다.

 

또한, CORS는 요청 메서드 및 헤더 등에 대한 추가적인 제어도 가능합니다. 이를 통해 서버는 보안 상의 이유로 요청이 거부되어야 하는 경우에도 적절한 응답을 반환할 수 있습니다.

 

CORS는 모든 브라우저에서 지원되는 표준이며, 웹 개발에서 자주 사용됩니다. 하지만 CORS를 사용하면 서버 및 클라이언트 모두에서 추가적인 구성이 필요하므로, 이를 고려하여 개발을 진행해야 합니다.

---

*Access-Control-Allow-Origin

Access-Control-Allow-Origin은 CORS에서 사용되는 HTTP 응답 헤더 중 하나로, 다른 도메인에서의 요청을 허용하는 경우 어떤 도메인에서 요청을 허용할 것인지를 명시합니다.

 

예를 들어, 서버 A에서 자원을 제공하는 도메인이 www.example.com이고, 다른 도메인인 www.otherdomain.com 에서 이 자원에 접근하려는 경우, www.example.com 서버에서 Access-Control-Allow-Origin 헤더에 www.otherdomain.com을 명시하여 요청을 허용할 수 있습니다. 이를 통해 브라우저는 해당 도메인에서 온 요청만 해당 자원에 접근하도록 허용하게 됩니다.

 

만약 Access-Control-Allow-Origin 헤더에 " * " (모든 도메인)을 명시한다면, 모든 도메인에서 해당 자원에 접근할 수 있도록 허용하게 됩니다. 이 경우 보안상의 이유로 권장되지 않습니다.

 

예시 코드) 

const http = require('http');

const server = http.createServer((req, res) => {
  // 모든 도메인에서의 요청을 허용하기 위해 Access-Control-Allow-Origin 헤더에 *을 설정합니다.
  res.setHeader('Access-Control-Allow-Origin', '*');

  // 서버로부터 받은 요청에 대한 응답을 작성합니다.
  res.write('Hello World!');
  res.end();
});

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

위 코드에서 res.setHeader('Access-Control-Allow-Origin', '*') 구문은 모든 도메인에서의 요청을 허용하기 위해 Access-Control-Allow-Origin 헤더에 *을 설정합니다. 만약 특정 도메인에서만 요청을 허용하고자 하는 경우, * 대신 해당 도메인을 명시하면 됩니다.

 

이 코드는 간단한 Node.js 서버를 생성하고, 클라이언트에서의 요청에 대해 Access-Control-Allow-Origin 헤더를 설정하여 모든 도메인에서의 요청을 허용하는 예제입니다. 실제 서비스에서는 보안 상의 이유로 Access-Control-Allow-Origin 헤더를 보다 적절하게 구성해야 하며, CORS 설정을 위한 다른 헤더들도 함께 설정해야 할 수 있습니다.