웹 개발을 하다보면 다른 도메인에서 호스팅되는 스크립트를 실행해야 할 경우가 많이 있습니다. 하지만 보안상의 이유로 웹 브라우저는 Same-Origin Policy를 적용하여 다른 도메인 간의 자원 공유를 제한합니다. 이로 인해 다른 도메인의 스크립트를 직접 실행할 수 없습니다.

이 문제를 해결하기 위한 방법 중 하나가 CORS입니다. CORS는 서버에서 클라이언트로 특정 도메인의 스크립트 실행을 허용하는 메커니즘입니다. 이를 통해 서버는 클라이언트 요청의 헤더에 Access-Control-Allow-Origin 헤더를 포함하여 다른 도메인에서의 요청을 허용할 수 있습니다.

1. 서버 설정

서버 측에서 CORS를 허용하려면 응답에 Access-Control-Allow-Origin 헤더를 포함시켜야 합니다. 다음은 Node.js와 Express를 사용한 예시입니다.

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

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://example.com'); // 허용할 도메인 설정
  next();
});

app.get('/api/data', (req, res) => {
  // 클라이언트에 데이터를 응답
  res.json({ data: 'Hello, World!' });
});

app.listen(3000, () => {
  console.log('서버가 시작되었습니다.');
});

위 예시에서는 Access-Control-Allow-Origin 헤더에 http://example.com을 포함시켜 클라이언트에게 CORS를 허용하고 있습니다. 필요에 따라 다른 도메인을 추가로 지정할 수 있습니다.

2. 클라이언트에서 스크립트 실행

클라이언트에서는 XMLHttpRequest나 Fetch API를 사용하여 서버로 데이터를 요청할 수 있습니다. CORS를 사용하여 다른 도메인의 스크립트를 실행하는 방법은 다음과 같습니다.

fetch('http://example.com/api/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // 다른 도메인에서 받은 데이터를 처리
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

위 예시에서는 fetch 함수를 사용하여 원격 서버의 데이터를 요청하고 응답을 처리하고 있습니다. http://example.com/api/data는 허용된 도메인에서의 API 엔드포인트입니다.

요약

CORS를 통해 다른 도메인의 스크립트를 실행하는 방법에 대해 알아보았습니다. 서버에서 Access-Control-Allow-Origin 헤더를 설정하여 특정 도메인의 요청을 허용하고, 클라이언트에서 XMLHttpRequest나 Fetch API를 사용하여 스크립트를 실행할 수 있습니다. 잘 구현된 CORS 정책은 다른 도메인 간의 자원 공유를 원활하게 처리할 수 있도록 도와줍니다.

#CORS #JavaScript #서버 #클라이언트