JavaScript Fetch CORS 해결하기

CORS(Cross-Origin Resource Sharing)란 무엇인가요?

웹 애플리케이션을 개발하다 보면 외부 도메인간의 자원 공유가 필요한 경우가 있습니다. 이러한 상황에서 CORS는 웹 브라우저에서 안전한 방법으로 다른 도메인 간의 리소스 공유를 가능하게 해주는 메커니즘입니다. 일반적으로 Ajax 요청은 동일 출처 정책(same-origin policy)에 따라 요청이 제한됩니다. 때문에 Ajax 요청을 보낼 때 CORS를 처리하지 않으면 브라우저에서는 보안 상의 이유로 요청을 차단하게 됩니다.

다른 도메인에서 자원에 접근하기

예를 들어, 서버가 www.mywebsite.com 도메인에 위치해 있고, 이 도메인의 JavaScript 코드에서 http://api.example.com 의 데이터를 가져오려고 한다고 가정해봅시다. 웹 브라우저는 동일 출처 정책에 따라 이 요청을 차단할 것입니다. 이 문제를 해결하기 위해서는 CORS를 구현해야 합니다.

CORS 해결을 위한 Fetch API

JavaScript에서는 Fetch API를 사용하여 CORS를 해결할 수 있습니다. Fetch API는 XMLHttpRequest를 대체하는 최신 웹 표준이며, 더 직관적이고 간결한 코드를 작성할 수 있습니다.

예를 들어, Fetch API를 사용하여 다른 도메인의 데이터를 가져오는 코드를 살펴봅시다.

    
      fetch('http://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          // 데이터 처리 로직
        })
        .catch(error => {
          // 에러 처리 로직
        });
    
  

이렇게 간단한 코드로 다른 도메인의 데이터를 가져와서 비동기적으로 처리할 수 있습니다. 하지만, 위의 코드는 기본적인 Fetch API 사용법이며, CORS로 인해 문제가 발생할 수 있습니다.

CORS 문제 해결 방법

웹 서버에서 CORS를 해결하기 위해 다음과 같은 방법 중 하나를 선택할 수 있습니다.

CORS 헤더 설정

서버 응답 헤더에 Access-Control-Allow-Origin을 추가하여 다른 도메인에서의 접근을 허용할 수 있습니다. 예를 들어, 모든 도메인에서의 접근을 허용하는 경우 아래와 같이 헤더를 설정합니다.

    
      Access-Control-Allow-Origin: *
    
  

프록시 서버 설정

프록시 서버를 사용하여 다른 도메인에서의 요청을 받고, 요청을 해당 도메인으로 전달하는 방식으로 CORS를 우회할 수 있습니다. 이 방법은 서버 측에서 CORS를 처리하는 것이기 때문에 JavaScript 코드를 수정할 필요가 없습니다.

요약

CORS(Cross-Origin Resource Sharing)는 다른 도메인 간의 리소스 공유를 가능하게 하는 메커니즘입니다. Fetch API를 사용하여 JavaScript에서 CORS 문제를 해결할 수 있습니다. 서버 단에서 CORS 헤더를 설정하거나 프록시 서버를 사용하여 CORS를 우회할 수 있습니다.

참고 자료

- MDN Web Docs: CORS - Fetch API Specification

위의 블로그 글은 CORS 문제를 해결하는 방법에 대해 쉽게 이해할 수 있도록 작성되었습니다. Fetch API를 사용하여 JavaScript에서 다른 도메인 간의 데이터 통신을 할 때 발생할 수 있는 문제들과 그 해결 방법에 대해 자세히 설명하고 있습니다. 이 글을 통해 웹 개발자들이 CORS에 대한 이해를 높일 수 있으며, 구글 SEO를 고려한 키워드 사용과 풍부한 예제 코드를 통해 기본적인 개념을 익힐 수 있습니다.