CORS, Proxy

클라이언트(react)서버에서 백엔드 서버로 fetch요청을 할 경우, 브라우저의 cors정책에 의해 에러를 볼 수 있다.
이는 요청 출처와 서버의 출처가 다른 경우, 보안 상의 이유로 브라우저에서 HTTP요청을 제한하기 때문에 발생한다.

이번 프로젝트에서 클라이언트 서버는 로컬에서 구동하고, 백엔드 서버는 외부 도메인을 사용하게 되어 CORS관련 에러를 보게되었다.

이를 위한 방법을 찾던 중, 2가지 방법을 찾을 수 있었는데
첫 번째는 react-create-app의 Proxy를 사용한 방법이다.

백엔드 서버 URL을 proxy로서 설정을 해두면, fetch요청이 미리 생성된 proxy서버로 전송이 됨으로서 CORS를 해결할 수 있으면서도 url을 간단하게 표현이 가능할 수 있었다.
예를 들어, /api/post로 요청을 보냈다면 3.15.XXX.XXX:8090/api/post 이러한 식으로 프록시로 생성된 주소로 origin이 대체되어서 전달되는 것이다.

아래와 같이 프록시를 package.json에서도 설정할 수 있지만,

// pacakge.json
{
	proxy: "http://3.15.XXX.XXX:8090"
}

또 다른 방법으로 http-proxy-middleware를 사용해서도 설정할 수 있었다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://3.15.XXX.XXX:8090',
      changeOrigin: true,
    }),
  );
};

---

origin앞에 proxy를 둬서 요청을 하는 방법을 알아봤다.
이전에는 요청 출처와 서버 출처를 달리하여 cors정책으로인해 통신이 어려웠지만
proxy를 사용해서 요청 출처 서버 출처가 다른 경우의 통신이 가능하게 할 수 있었다.