CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 다른 도메인간에 자원을 공유할 수 있도록 허용하는 메커니즘입니다. 이를 통해 웹 애플리케이션에서 다른 도메인의 API를 사용할 수 있게 되며, 보안 상의 이유로 기본적으로는 제한되어 있습니다. 따라서, 자바스크립트에서 CORS 요청에 대한 승인 규칙을 설정해야 합니다.

1. 서버 측에서 CORS 규칙 설정

먼저, 서버 측에서 CORS 규칙을 설정해야 합니다. 다음은 Node.js와 Express 프레임워크를 사용하는 경우 CORS 모듈을 설치하여 CORS 규칙을 적용하는 예제입니다.

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

const app = express();

// 모든 도메인의 CORS 요청 허용
app.use(cors());

app.get('/api/data', (req, res) => {
  // 데이터 반환
});

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

위의 예제에서는 모든 도메인에 대해 CORS 요청을 허용하도록 설정하였습니다. 필요에 따라 특정 도메인만 허용하거나 특정 헤더만 허용하는 등 세부적인 규칙을 설정할 수도 있습니다.

2. 클라이언트 측에서 CORS 사용하기

클라이언트 측에서는 XMLHttpRequest 객체 또는 Fetch API를 사용하여 CORS 요청을 보낼 수 있습니다. 다음은 XMLHttpRequest 객체를 사용하여 CORS 요청을 보내는 예제입니다.

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data');
xhr.withCredentials = true;  // 인증 정보 포함 여부 설정
xhr.setRequestHeader('Content-Type', 'application/json');  // 커스텀 헤더 설정

xhr.onload = function() {
  if (xhr.status === 200) {
    // 요청 성공 시 처리할 로직
    console.log(xhr.responseText);
  } else {
    // 요청 실패 시 처리할 로직
    console.error('요청이 실패하였습니다.');
  }
};

xhr.send();

위의 예제에서는 XMLHttpRequest 객체를 생성하여 GET 요청을 보내고 있습니다. 필요에 따라 POST, PUT, DELETE 등 다른 HTTP 메서드를 사용할 수도 있습니다. 또한, withCredentials 속성을 true로 설정하여 인증 정보를 포함하도록 할 수 있으며, setRequestHeader 메서드로 커스텀 헤더를 설정할 수도 있습니다.

이외에도 Fetch API를 사용하는 방법이 있으며, 사용하는 프레임워크나 라이브러리에 따라 다른 기능들을 사용할 수도 있습니다.

마무리

이제 자바스크립트에서 CORS 요청에 대한 승인 규칙을 설정하는 방법을 알아보았습니다. 서버 측에서 CORS 규칙을 설정하고, 클라이언트 측에서 XMLHttpRequest 객체나 Fetch API를 사용하여 CORS 요청을 보낼 수 있게 되었습니다. 이를 통해 웹 애플리케이션에서 다른 도메인의 자원에 접근하고 활용할 수 있습니다.

#coding #webdevelopment