웹 개발에서는 종종 자바스크립트를 사용하여 다른 도메인의 API를 호출해야 하는 경우가 있습니다. 그러나 웹 브라우저의 보안 상의 이유로, 기본적으로 다른 도메인에서 리소스를 가져오는 것은 허용되지 않습니다. 이를 위해 CORS (Cross-Origin Resource Sharing)를 사용하여 서버와 클라이언트 간의 통신을 설정할 수 있습니다.

CORS란 무엇인가요?

CORS는 웹 브라우저의 보안 정책을 우회하여 다른 도메인에서 리소스를 요청할 수 있는 메커니즘을 제공하는 기술입니다. 이를 통해 클라이언트 측 자바스크립트 코드를 사용하여 다른 도메인의 API를 호출할 수 있습니다.

CORS 활성화 및 설정하기

서버 측에서는 CORS를 활성화하고 클라이언트의 요청을 허용하는 설정이 필요합니다. 대부분의 웹 프레임워크나 서버 언어마다 CORS 설정을 할 수 있는 방법이 제공됩니다. 아래는 일반적인 CORS 설정 예시입니다.

Node.js의 Express를 사용하는 경우

const express = require('express');
const app = express();

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

// API 라우트 등록 및 처리

app.listen(3000, function() {
  console.log('서버가 3000 포트에서 실행 중입니다.');
});

위 코드에서는 Express 미들웨어를 사용하여 CORS를 활성화하고, 모든 도메인에서의 요청을 허용하도록 설정하였습니다. Access-Control-Allow-Origin 헤더를 통해 어떤 도메인의 요청을 허용할 것인지 설정하며, 위 예시에서는 '*'로 설정하여 모든 도메인의 요청을 허용하였습니다.

자바스크립트에서 API 호출하기

CORS가 서버에서 활성화되고 설정되면, 자바스크립트 코드를 사용하여 다른 도메인의 API를 호출할 수 있습니다. 이를 위해 XMLHttpRequest나 Fetch API를 사용할 수 있습니다. 아래는 Fetch API를 사용하여 API를 호출하는 예시입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // API 응답 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

위 코드에서는 fetch() 함수를 사용하여 'https://api.example.com/data' 주소에 GET 요청을 보내고, 응답 데이터를 JSON으로 파싱하여 사용합니다. 이후 응답 데이터를 처리하거나 에러 처리를 수행할 수 있습니다.

결론

CORS를 사용하여 자바스크립트에서 다른 도메인의 API 호출은 웹 개발에서 자주 사용되는 기능입니다. 서버 측에서 적절하게 CORS를 활성화하고 설정하면 클라이언트 측에서 원하는 API를 호출하여 데이터를 가져올 수 있습니다.