[typescript] 타입스크립트에서 서버와의 통신에서 발생하는 CORS 에러 해결 방법 총론

11 Dec 2023

typescript

서로 다른 도메인 간에 데이터를 주고받을 때, 브라우저는 교차 출처 자원 공유(Cross-Origin Resource Sharing, CORS) 규칙에 따라 요청을 처리합니다. 타입스크립트(Typescript)로 작성된 애플리케이션을 개발할 때, 서버와의 통신에서 CORS 에러가 발생할 수 있습니다. 이 문제를 해결하기 위해 다양한 방법이 있습니다.

본 블로그에서는 타입스크립트 애플리케이션에서 CORS 에러를 해결하기 위한 총론을 다룰 것입니다. CORS 에러를 해결하는 방법은 다양합니다. 대표적으로 서버 측에서 CORS 헤더를 설정하거나, 프록시를 사용하는 방법 등이 있습니다.

서버 측에서 CORS 헤더 설정

첫 번째 해결 방법은 서버 측에서 CORS 헤더를 설정하는 것입니다. 서버에서는 클라이언트로부터의 요청에 대해 제대로 설정된 CORS 헤더를 응답으로 보내야 합니다. 이를 위해 서버 코드에 CORS 헤더를 설정하는 방법을 살펴볼 것입니다.

예를 들어, Node.js 서버에서는 express 프레임워크를 사용하여 CORS를 처리할 수 있습니다.

import express from 'express';
import cors from 'cors';

const app = express();
// 모든 도메인에서의 요청을 허용하는 CORS 설정
app.use(cors());

서버 측에서 CORS 헤더를 설정하는 방법은 각 서버 프레임워크나 라이브러리마다 다를 수 있으므로 해당 프레임워크 또는 라이브러리의 공식 문서를 참고해야 합니다.

프록시 사용

두 번째 해결 방법은 프록시를 사용하는 것입니다. 프록시 서버를 중간에 두고 클라이언트와 서버 간의 통신을 프록시 서버를 통해 처리함으로써 CORS 에러를 회피할 수 있습니다.

예를 들어, Webpack을 사용하여 프록시를 설정할 수 있습니다.

// webpack.config.js
module.exports = {
  // ... 기타 설정
  devServer: {
    proxy: {
      '/api': {
        target: 'http://서버주소:포트번호',
        changeOrigin: true,
      },
    },
  },
};

프록시를 사용하는 방법은 개발 환경에서 특히 유용하며, 실제 배포 환경에서는 서버 측에서 CORS 헤더를 설정하는 것이 권장됩니다.

본 블로그에서는 타입스크립트 애플리케이션에서 CORS 에러를 해결하기 위한 두 가지 주요한 방법을 살펴보았습니다. 각 상황에 맞게 적절한 해결 방법을 선택하여 CORS 문제를 해결할 수 있습니다.

참고 자료

이상으로 타입스크립트에서의 CORS 에러 해결 총론에 대한 블로그 포스트를 마치도록 하겠습니다.

목차

서버 측에서 CORS 헤더 설정

프록시 사용

참고 자료