CORS와 Proxy

CORS와 Proxy

CORS는 웹 애플리케이션에서 다른 도메인의 리소스를 요청하는 것을 말한다.

브라우저는 보안상의 이유로 이러한 요청에 대해 제한을 두는데, 이러한 제한을 해결하기 위해 다음 두 가지 방법을 사용할 수 있다.

CORS 설정

추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려줄 수 있다.

출처

웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의된다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말한다.
일부 작업은 동일 출처 콘텐츠로 제한되나, CORS 설정을 통해 제한을 해제할 수 있다.

Proxy 기능 사용

proxy 기능을 이용한 CORS 에러 해결 방법은 다음과 같다.

1. 서버 측에서 API 요청을 보내는 proxy API를 작성한다.
2. 프론트엔드(클라이언트)에서 요청할 API 주소를 proxy API 주소로 변경하여 요청한다.
3. proxy API는 해당 요청을 받아 실제 API 서버로 전달한다.
4. API 서버는 요청에 대한 응답을 반환한다.
5. proxy API는 응답을 받아 다시 프론트엔드(클라이언트)로 전달한다.

이렇게 하면 클라이언트에서 보내는 요청이 proxy API를 거쳐서 실제 API 서버에 전달되므로, CORS 에러를 회피할 수 있다. 또한, proxy API를 이용하면 다른 도메인에서 온 요청을 받아 처리할 수 있기 때문에, 클라이언트에서 다른 도메인의 API를 자유롭게 사용할 수 있다.

React Proxy 사용법

아래는 클라이언트에서 http-proxy-middleware를 사용하여 proxy API로 요청하는 예시이다.

webpack dev server 에서 제공하는 proxy는 전역적인 설정이기 때문에, 종종 해당 방법이 충분히 적용되지 않는 경우가 생기기도 한다.
수동으로 proxy를 적용해줘야 하는 경우, http-proxy-middleware를 사용해야 한다.

패키지를 설치한 후, React App의 src 파일 안에서 setupProxy.js 파일을 생성하고, 안에서 설치한 라이브러리 파일을 불러온 다음, 아래와 같이 작성한다.

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', //proxy가 필요한 path prameter를 입력합니다.
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력합니다.
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

위 코드에서는 /api 경로로 들어오는 요청을 http://localhost:5000 주소로 프록시한다. 이 때, changeOrigin 옵션을 true로 설정하면 요청 헤더의 Host 값을 target 주소로 변경해준다.

프록시 여러 개 설정하는 방법

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (app) => {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3080',
      changeOrigin: true,
    }),
  );
  app.use(
    '/api2',
    createProxyMiddleware({
      target: 'http://localhost:3070/',
      changeOrigin: true,
    }),
  );
};

그리고 기존의 fetch나 axios를 통해 요청하던 부분에서 도메인 부분을 제거한다.

export async function getAllfetch() {
		// 기존: const response = await fetch('우회할 api주소/params')
    const response = await fetch('/params');
    .then(() => {
			...
		})
}

http-proxy-middleware를 사용하면 프록시 요청을 중간에 변경할 수도 있다. 예를 들어, 특정 헤더나 쿼리 파라미터를 추가하거나, 응답 데이터를 수정할 수도 있다. 이는 옵션을 조정하여 구현할 수 있다.

http-proxy-middleware를 사용하면 Express나 Connect와 같은 미들웨어 프레임워크에서 손쉽게 프록시 서버를 구현할 수 있어, 웹 개발에서 유용하게 사용된다.

하지만, proxy 기능을 이용하는 방법은 보안에 취약할 수 있으므로, 서버 측에서 적절한 보안 조치가 필요하다. 또한, proxy 기능을 이용하는 것이 항상 최선의 방법은 아니며, 가능하다면 CORS 정책을 준수하도록 설계하는 것이 좋다.