Proxy

Proxy

proxy란?

다른 서버 상의 자원을 찾는 클라이언트로부터 요청을 받아 중계하는 서버를 말한다.
proxy 기능을 사용하면 CORS 정책을 우회할 수 있는데, 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달하게 된다. 여기서 React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저는 CORS 정책을 위반한지 모르게 되고, 브라우저를 proxy 기능을 통해 속이게 된다.

proxy사용법

webpack dev server proxy 사용법

1. 클라이언트 package.json 파일 최하단에 "proxy" 값을 설정해준다.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    ...
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
   ...
    ],
    "development": [
     ...
    ]
  },
  	"proxy" : "우회할 API 주소"

}

2. 기존의 fetch, 혹은 axios를 통해 데이터를 요청하던 부분에서 도메인 부분을 제거해준다.

//before
export async function getAllfetch() {

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

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

React Proxy 사용법

1.http-proxy-middleware 라이브러리를 설치 한다.

pm install http-proxy-middleware --save

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

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

module.exports = function(app) {
  app.use(
    '/api', //proxy가 필요한 path prameter를 입력한다.
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 서버url를 입력해준다.
      changeOrigin: true,
    })
  );
};

3. 기존의 fetch, 혹은 axios를 통해 데이터를 요청하던 부분에서 도메인 부분을 제거해준다.

//before
export async function getAllfetch() {

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

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

오늘 과제 후기

오늘은 Proxy를 사용해서 데이터를 조회하는 과제를 진행했는데, 모두 맞게 작성했음에도 불구하고 404에러가 떠서 40분넘게 헤맸는데 서버를 껐다가 키니 바로 해결됐다..ㅎ 사실 서버에서 에러가 났으면 서버에 문제가 있다는건데 proxy를 처음 다루다 보니, 클라이언트에서 내가 뭔가 실수했다는 생각이 들어서 애꿎은 클라이언트만 건드렸고, 정말 뒷통수를 세게 맞은 기분이었다ㅎ 에러메세지의 중요성을 깨달은 하루였다 ㅎ