웹 개발에서 다른 도메인의 웹페이지에 접근하고 데이터를 가져오는 것은 보안 상의 이유로 기본적으로 허용되지 않습니다. 이러한 제한을 우회하기 위해 Cross-Origin Resource Sharing (CORS)를 사용할 수 있습니다. CORS를 통해 허용된 도메인에서만 데이터를 가져올 수 있도록 서버 측에서 특정 헤더를 설정할 수 있습니다.

CORS 동작 원리

CORS는 브라우저와 서버 간의 통신에서 이루어집니다. 웹 페이지에서 자바스크립트를 사용하여 다른 도메인의 데이터를 요청할 때, 브라우저는 서버에 사전 요청을 보내고 서버는 응답 헤더에 허용된 도메인을 지정합니다. 그 후에 브라우저에서 실제 요청을 보내고 서버는 해당 요청을 처리합니다.

CORS 설정

서버 측에서 CORS를 사용하려면 응답에 특정 헤더를 추가해야 합니다. 아래는 예시 코드입니다.

// Express.js를 사용하는 예시
const express = require('express');
const app = express();

app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'https://allowed-domain.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 원하는 라우트에서 데이터를 가져오는 예시
app.get('/data', function(req, res) {
  // 데이터 처리 로직
  // ...
  res.json(data);
});

app.listen(3000, function() {
  console.log('Server listening on port 3000');
});

위의 예시에서는 Express.js를 사용하여 서버를 구성하였습니다. res.setHeader() 함수를 통해 Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 헤더를 설정하고 허용된 도메인, 허용된 HTTP 메소드, 요청에 포함될 수 있는 헤더를 지정합니다. 요청을 처리하는 라우터에서 필요한 데이터를 처리한 후 res.json()을 사용하여 데이터를 반환합니다.

요청하기

CORS를 이용하여 다른 도메인의 데이터를 가져오기 위해서는 클라이언트 측에서도 몇 가지 설정을 해야 합니다. 아래는 웹 페이지에서 자바스크립트를 사용하여 CORS 요청을 보내는 예시 코드입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직
    // ...
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 예시에서는 fetch() 함수를 사용하여 다른 도메인의 /data 경로에 GET 요청을 보냅니다. 응답으로 받은 데이터를 처리하는 로직을 작성할 수 있으며, 에러가 발생한 경우 콘솔에 에러 메시지를 출력합니다.

요약

CORS를 사용하면 자바스크립트를 사용하여 다른 도메인의 웹페이지에서 데이터를 가져올 수 있습니다. 서버 측에서 특정 헤더를 설정하고 클라이언트 측에서는 fetch() 함수를 사용하여 요청을 보낼 수 있습니다. 이를 통해 웹 개발에서 다른 도메인 간의 데이터 공유를 가능하게 할 수 있습니다.

해시태그

#CORS #JavaScript