내일배움캠프 React_7기 TIL - 28. CORS

CORS

CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 보안상의 이유로 서로 다른 출처(origin) 간의 리소스 공유를 제어하는 메커니즘이다. 기본적으로, 웹 페이지는 자신이 로드된 출처와 동일한 출처에서만 자원을 요청할 수 있다. 이 제한은 Cross-Origin 요청을 방지하여 악의적인 사이트가 다른 사이트의 데이터를 요청하는 공격을 예방하는 데 도움을 준다.

CORS의 주요 개념

1. 출처(origin): 출처는 프로토콜(http, https), 도메인, 포트번호로 구성된다. 예를 들어, https://example.com:8080은 https://example.com이라는 도메인과 8080 포트를 포함하는 출처를 의미한다.
2. Same-Origin Policy: 웹 브라우저는 기본적으로 같은 출처에서만 리소스를 요청하도록 제한한다. 예를 들어, https://example.com에서 실행 중인 자바스크립트는 다른 출처인 https://another.com에 직접 요청을 보내지 못한다.
3. CORS 헤더: CORS 요청을 허용하려면 서버가 특정 HTTP 헤더를 통해 요청을 승인해야 한다.
   • Access-Control-Allow-Origin: 허용된 출처를 지정하는 헤더. 예를 들어, Access-Control-Allow-Origin: *는 모든 출처를 허용한다.
   • Access-Control-Allow-Methods: 서버가 허용하는 HTTP 메서드(GET, POST 등)를 지정.
   • Access-Control-Allow-Headers: 요청 헤더에 포함할 수 있는 헤더를 지정.
   • Access-Control-Allow-Credentials: 쿠키나 인증 정보 전송을 허용할지 여부를 설정.

CORS 요청의 종류

1. 단순 요청(Simple Request):
   • GET, POST, HEAD 메서드만 허용되고, 특별한 요청 헤더(예: Authorization)를 포함하지 않는 요청이다.
   • 서버는 Access-Control-Allow-Origin 헤더만 설정하여 응답을 보내면 된다.
2. 프리플라이트 요청(Preflight Request):
   • CORS가 복잡한 요청일 때(예: PUT, DELETE 메서드나 Authorization 헤더를 사용할 때) 브라우저는 먼저 OPTIONS 메서드를 사용하여 서버에 요청을 보낸다.
   • 서버는 이 요청에 대해 적절한 CORS 헤더를 포함한 응답을 보내야 하며, 이를 통해 클라이언트는 실제 요청을 보낼 수 있는 권한을 확인한다.

CORS 처리 예시

• 클라이언트 측: 자바스크립트에서 fetch나 XMLHttpRequest를 사용하여 서버에 요청을 보낼 때 CORS가 적용된다.

  javascript
  코드 복사
  fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'same-origin',  // 인증 정보 전송 여부
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
  

• 서버 측 (Node.js 예시): 서버는 CORS를 처리하기 위해 헤더를 설정해야 한다.

  javascript
  코드 복사
  const express = require('express');
  const app = express();
  
  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');  // 모든 출처 허용
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
  });
  
  app.get('/data', (req, res) => {
    res.json({ message: 'Hello from server!' });
  });
  
  app.listen(3000, () => console.log('Server running on http://localhost:3000'));
  

CORS 오류 처리

• 브라우저 오류 메시지: CORS가 허용되지 않은 요청을 보낼 때, 브라우저는 이를 차단하고 개발자 도구 콘솔에 오류 메시지를 출력한다. 예를 들어, "No 'Access-Control-Allow-Origin' header is present on the requested resource"와 같은 메시지가 표시된다.
• 서버의 CORS 설정 미비: 서버가 적절한 CORS 헤더를 응답에 포함하지 않으면 클라이언트는 요청을 차단당한다.

CORS는 웹 보안의 중요한 부분으로, 올바르게 설정되지 않으면 원치 않는 보안 취약점이 발생할 수 있다. 따라서 서버와 클라이언트 모두 적절한 CORS 정책을 설정하는 것이 중요하다.