자바스크립트에서 CORS를 어떻게 구현하나요?

12 Oct 2023

cors

서버에서 CORS 설정: 서버 측에서 Access-Control-Allow-Origin 헤더를 추가하여 특정 도메인에서 요청을 허용합니다. 이 헤더에는 “*” 값을 사용하여 모든 도메인에서 요청을 허용할 수도 있습니다.

예를 들어, Node.js의 Express 프레임워크를 사용하는 경우 다음과 같이 CORS 설정을 추가할 수 있습니다:

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

// CORS 설정
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://example.com'); // 특정 도메인에서 요청 허용
  // res.header('Access-Control-Allow-Origin', '*'); // 모든 도메인에서 요청 허용
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

// 라우트 및 핸들러 구현
app.get('/api/data', (req, res) => {
  // 데이터 반환
});

app.listen(3000, () => {
  console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});

XMLHttpRequest 객체를 사용하여 CORS 요청: 클라이언트 측에서는 XMLHttpRequest 객체를 사용하여 CORS 요청을 보낼 수 있습니다. open() 메서드에 요청 메서드(GET, POST 등) 및 URL을 지정한 후, send() 메서드로 요청을 보냅니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 응답 처리
  }
};
xhr.send();

위의 예제에서는 GET 메서드를 사용하여 http://api.example.com/data 에서 데이터를 가져옵니다. 받은 응답은 JSON.parse() 함수를 사용하여 JSON 형식으로 변환하고 처리할 수 있습니다.

CORS를 구현할 때, 주의해야 할 점은 브라우저에서 “preflight” 요청을 보낼 수도 있다는 것입니다. 이는 본 요청 전에 서버가 허용되는 도메인인지 확인하기 위해 OPTIONS 메서드로 미리 요청을 보내는 것입니다. 이러한 preflight 요청에도 서버에서 CORS 관련 헤더를 잘 설정해주어야 합니다.