웹 개발에서 도메인 간 비동기 통신은 매우 일반적인 요구사항입니다. 그러나 보안 상의 이유로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)를 적용하여 다른 도메인 간의 통신을 제한합니다. 따라서 동일 출처 정책을 우회하기 위해 Cross-Origin Resource Sharing (CORS)를 사용할 수 있습니다.

CORS란?

CORS는 웹 애플리케이션에서 다른 도메인 간의 리소스 공유를 허용하기 위한 메커니즘입니다. 클라이언트 측의 자바스크립트에서 다른 도메인으로의 요청을 보낼 때, 서버는 특정 헤더를 포함한 응답을 전송하여 필요한 권한을 부여합니다. 이를 통해 웹 브라우저는 리소스에 접근할 수 있는지를 판단하고, 도메인 간의 안전한 통신을 가능하게 합니다.

CORS 활성화하기

서버 측에서 다른 도메인 간의 비동기 요청을 허용하기 위해서는 CORS를 활성화해야 합니다. 일반적으로 이 설정은 서버에서 진행되며, 각 서버 환경마다 설정 방법이 조금씩 다를 수 있습니다. 하지만 대부분의 서버에서는 Access-Control-Allow-Origin 헤더를 설정하여 다른 도메인으로의 요청을 허용합니다.

아래는 Express.js 서버에서 CORS를 활성화하는 예시입니다.

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

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

위 예시에서는 모든 도메인에서의 요청을 허용하기 위해 Access-Control-Allow-Origin 헤더를 '*'로 설정합니다. 또한 요청의 허용 메서드와 헤더도 명시하였습니다.

클라이언트에서 CORS 요청 보내기

서버에서 CORS를 활성화한 이후, 클라이언트에서는 일반적인 비동기 요청을 보내는 것과 동일한 방식으로 요청을 보낼 수 있습니다. 다만 추가적인 설정이 필요하지 않습니다.

아래는 자바스크립트에서 CORS 요청을 보내는 간단한 예시입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위 예시에서는 fetch 함수를 사용하여 다른 도메인에 있는 /data 엔드포인트로 GET 요청을 보내고 있습니다. 응답은 response.json() 메서드를 통해 JSON 형태로 파싱되어 처리됩니다.

마무리

CORS를 활용하여 자바스크립트로 다른 도메인 간에 비동기 통신을 수행할 수 있습니다. 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하여 허용할 도메인을 명시하고, 클라이언트에서는 일반적인 비동기 통신 메서드를 사용하여 요청을 보내면 됩니다. 이를 통해 권한 있는 도메인 간 통신을 안전하게 수행할 수 있습니다.

#webdevelopment #javascript