[TIL] proxy를 통한 우회 접근 feat.cors

---

proxy의 개요

일반적으로 API를 통해 데이터를 요청하는 경우, 브라우저는 현재 주소와 요청 주소가 동일해야 데이터에 접근할 수 있는 SOP 정책 을 사용하고 있다.

이때, CORS 정책에 의해 요청을 받는 APP이 CORS를 허용 하고 요청하는 주소에서 추가 HTTP 헤더를 통해 CORS 권한을 브라우저에 전달하는 방법 으로 origin이 다른 경우에도 데이터를 받아올 수 있다.

그러나, 이런 정석적인 과정 없이도 React 라이브러리 혹은 Webpack Dev Server의 proxy 기능을 통해 SOP 정책을 우회하여 데이터에 접근 할 수 있다.

이는 별도의 HTTP 헤더 없이 요청을 받는 APP에서 허용된 도메인의 경우 해당 APP으로 proxy를 통해 우회적으로 요청하고 받은 응답을 브라우저에게 전달하는 방식 으로 브라우저에서 인식하기는 요청과 응답 모두 요청하는 APP에서 이루어지므로 CORS Error가 발생하지 않게 된다.

---

정상적인 CORS 요청

---

proxy를 통한 우회 요청

---

proxy 사용법

React-dev-server의 proxy 기능을 사용하는 경우

// React-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 주소"
}

// 이후 fetch를 사용하는 부분에서 url을 제거한다.
export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}
          
// React-dev-server의 proxy 기능이 해당 fetch의 url을 설정 값으로 지정한다.
// 하지만, 이 경우 proxy의 url이 전역 설정이므로 2개 이상의 url에 대해 proxy를 사용할 수 없다.

npm의 http-proxy-middleware 를 사용하는 경우

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

// 이후 fetch를 사용하는 부분에서 url을 제거한다.
export async function getAllfetch() {

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

---