[Proxy] CORS 에러를 해결하는 방법

Proxy

모든 출처의 리소스를 허용한다면 보안에 큰 문제를 야기할 수 있습니다. 그래서 브라우저는 동일 출처의 리소스만 접근을 허용하는 정책을 기본적으로 채택하고 있으나 어플리케이션을 사용하면서 출처가 다른 리소스를 사용할 수 밖에 없으므로 CORS를 통해 그 제한을 해제할 수 있습니다. 

 

하지만 모든 출처의 접근을 허락한다면 보안성이 낮아지고 해킹 위험이 높아지는 굴레에 들어오게 됩니다.

따라서 모든 도메인의 접근을 허용해서는 안되고 특정 도메인을 허용하도록 구현해야합니다.

 

정석대로라면 프론트엔드에서 백엔드에게 특정 도메인을 허용해달라는 요청을 보내면 백엔드에서 응답헤더에 필요한 값들을 넣어 전달을 해주어야 합니다.

 

하지만 리액트 라이브러리나 Webpack Dev Server에서 제공하는 Proxy 기능을 사용한다면 별도의 응답헤더를 받을 필요 없이 CORS 정책을 우회할 수 있습니다. 이는 브라우저가 리액트 앱으로 데이터를 요청하고 해당 요청을 백엔드로 전달하게 됩니다. 여기서 리액트 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저는 CORS 정책을 위반했는지 모르게 됩니다.

 

출처 : 코드스테이츠 유어클래스

proxy를 사용한다면 리액트 앱에서 브라우저를 통해 API를 요청할 때, proxy를 통해 백엔드 서버로 요청을 우회하여 보내게 됩니다. 그러면 백엔드 서버는 응답을 리액트 앱으로 보내고, 리액트 앱은 받은 응답을 백엔드 서버 대신 브라우저에게 전달합니다. 그러면 출처가 같아지기 때문에 브라우저는 이 사실을 알지 못하고 허용하게 됩니다.

 

 

Proxy 사용법

1. webpack dev server proxy

...
"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
	"proxy" : "우회할 API 주소"
}

package.json 파일에서 "proxy"값을 맨 밑에 작성해 쉽게 찾을 수 있도록 합니다.

export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}

export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}

요청 부분에서 도메인 부분을 제거합니다.

 

2. React Proxy

npm install http-proxy-middleware --save

라이브러리를 다운 받습니다.

 

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, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

React App의 src 파일 안에서 setupProxy.js 파일을 생성하고 위와 같이 작성합니다.

export async function getAllfetch() {

    const response = await fetch('우회할 api주소/params');
    .then(() => {
			...
		})
}

export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}

proxy 기능을 사용할때와 동일하게 도메인 부분을 제거합니다.