자바스크립트에서 CORS를 통해 다른 도메인의 뉴스 피드를 가져오는 방법에 대해 알아보세요.

12 Oct 2023

cors

웹 애플리케이션을 개발하다 보면, 다른 도메인에서 제공되는 데이터에 접근해야 할 필요가 생길 수 있습니다.

이때 필요한 것이 Cross-Origin Resource Sharing (CORS)입니다. CORS는 웹 브라우저에서 동일 출처 정책(Same-Origin Policy)을 우회하여, 다른 도메인에서 리소스를 요청할 수 있는 기능을 제공합니다.

CORS 동작 원리

CORS는 서버와 클라이언트 간의 통신에서 추가적인 HTTP 헤더를 사용하여 동작합니다.

클라이언트에서 다른 도메인의 리소스를 요청합니다.
서버에서는 요청을 받고, 응답에 CORS 관련 헤더를 추가합니다.
클라이언트에서는 서버의 응답을 확인하고, 이에 따라 동작을 결정합니다.

CORS 설정

서버 측에서 CORS를 설정하는 방법은 다양하지만, 아래는 일반적인 CORS 설정 예제입니다.

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.get('/api/news', (req, res) => {
  // 뉴스 데이터를 가져오는 로직
  res.json({ news: 'Hello World' });
});

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

위 예제에서는 Express.js 프레임워크를 사용하고 있습니다. 서버의 res.header() 메서드를 사용하여 CORS 관련 헤더를 추가하고, 특정 경로(/api/news)에서 클라이언트로 뉴스 데이터를 응답합니다.

CORS 요청 예제

CORS를 허용하는 서버에서 데이터를 가져오는 클라이언트 코드는 다음과 같습니다.

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

위 예제에서는 fetch API를 사용하여 다른 도메인(https://example.com)의 /api/news 경로로 GET 요청을 보냅니다. 서버에서는 위에서 설정한 CORS 헤더에 따라 요청을 처리하고, 클라이언트에 뉴스 데이터를 응답합니다.

CORS를 통해 다른 도메인의 뉴스 피드를 가져올 수 있기 때문에, 웹 애플리케이션에서 다양한 데이터를 활용하여 사용자에게 보다 풍부한 경험을 제공할 수 있습니다.

결론

CORS를 사용하여 다른 도메인에서 리소스를 가져올 수 있게 되면, 웹 애플리케이션의 기능과 퍼포먼스를 향상시킬 수 있습니다. 그러나 보안상의 이유로 모든 도메인에 대해 권한을 허용하는 것은 좋지 않으므로, 필요한 도메인에 대해서만 CORS를 설정하는 것이 중요합니다.

#CORS #JavaScript