Colin's Blog
자바스크립트에서 AJAX 요청을 보낼 때 CORS 오류를 피하는 방법에 대해 알아보세요.

CORS (Cross-Origin Resource Sharing)는 도메인 간에 리소스를 공유하는 것을 제한하는 보안 메커니즘입니다. 브라우저는 보안상의 이유로 다른 도메인에 AJAX 요청을 보내거나 다른 도메인에서 리소스를 가져오는 것을 제한합니다. 그러나, 다른 도메인과의 통신이 필요한 경우, CORS 오류를 피하는 다양한 방법이 있습니다. 이번 글에서는 자바스크립트에서 CORS 오류를 피하는 세 가지 방법을 살펴보겠습니다.

1. 프록시 서버를 이용하기

프록시 서버를 사용하여 CORS 오류를 피할 수 있습니다. 프록시 서버는 클라이언트 요청을 대신하여 다른 도메인으로 보내주는 역할을 합니다. 클라이언트는 프록시 서버에 AJAX 요청을 보내고 프록시 서버는 해당 요청을 다른 도메인으로 전달합니다. 서버 간의 통신은 동일한 도메인에서 이루어지기 때문에 CORS 오류가 발생하지 않습니다.

예를 들어, 다음과 같이 프록시 서버를 구현할 수 있습니다:

// 프록시 서버 코드 (예시)
const express = require('express');
const request = require('request');

const app = express();

app.use('/api', (req, res) => {
  const url = 'https://다른도메인.com' + req.url;
  req.pipe(request(url)).pipe(res);
});

app.listen(3000, () => {
  console.log('프록시 서버가 3000번 포트에서 실행 중입니다.');
});

클라이언트에서는 아래와 같이 프록시 서버로 요청을 보낼 수 있습니다:

// 클라이언트 코드
fetch('http://localhost:3000/api/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직
  })
  .catch(error => {
    // 에러 처리 로직
  });

2. CORS 헤더 추가하기

서버에서는 CORS 헤더를 설정하여 클라이언트의 요청을 허용할 수 있습니다. Access-Control-Allow-Origin 헤더를 사용하여 허용할 도메인을 지정하고, Access-Control-Allow-Methods 헤더를 사용하여 허용할 HTTP 메서드를 지정할 수 있습니다.

아래는 Node.js와 Express.js를 사용하여 CORS 헤더를 설정하는 예시입니다:

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://허용도메인.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  next();
});

// 라우트 및 미들웨어 등록
// ...

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

3. JSONP를 사용하기

JSONP (JSON with Padding)는 스크립트 요청으로부터 데이터를 가져올 때 사용되는 방법입니다. 일반적인 AJAX 요청과 달리, JSONP 요청은 동일한 도메인으로부터 데이터를 가져올 수 있습니다. 서버는 콜백 함수를 사용하여 데이터를 반환합니다.

클라이언트에서 JSONP 요청을 보내는 예제를 살펴보겠습니다:

function handleResponse(data) {
  // 데이터 처리 로직
}

const script = document.createElement('script');
script.src = 'https://다른도메인.com/data?callback=handleResponse';
document.body.appendChild(script);

서버에서는 다음과 같이 콜백 함수로부터 데이터를 반환합니다:

const data = { name: 'John', age: 30 };
const callback = req.query.callback;

res.send(`${callback}(${JSON.stringify(data)})`);

결론

CORS 오류를 피하기 위해 프록시 서버를 사용하거나 서버에서 CORS 헤더를 설정하거나 JSONP를 사용할 수 있습니다. 각 방법에는 장단점이 있으므로 상황과 요구 사항에 맞는 방법을 선택해야 합니다. 직면한 문제에 대한 해결책은 다양할 수 있으며, 이 글에서 제시한 방법들은 이러한 문제를 해결하기 위한 출발점으로 활용할 수 있습니다.

#javascript #AJAX #CORS

© 2018 Colin. All rights reserved.