[Proxy를 설정해 HTTP 통신하기]

Proxy

---

Proxy는 이전에 배웠던 CORS 정책을 우회하여 별도의 응답 헤더를 받을 필요 없이 브라우저가 React 앱으로 데이터를 요청하고,

해당 요청을 백엔드로 전달할 수 있다. 

여기서 React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저는 CORS 정책을 위반했는지 모르게 된다. 

=> 브라우저를 proxy 기능을 통해 속이는 것이다.

 

🔽 proxy 적용 전 흐름

 

🔽 proxy 적용 후 흐름

 

 

Proxy 사용법

 

1. webpack dev server proxy

webpack dev server의 proxy를 사용하게 되면, 브라우저 API를 요청할 때 백엔드 서버에 직접 요청하지 않고, 현재 개발서버의 주소로 우회 요청하게 된다. 

 

웹팩 개발 서버의 proxy 설정은 원래 웹팩 설정을 통해서 적용하지만, CRA를 통해 만든 리액트 프로젝트에서는 package.json에서 "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 or axior를 통해 요청하던 부분에서 도메인 부분을 제거한다.

export async function getAllfetch() {

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

export async function getAllfetch() {

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



 

2. React Proxy 사용법

webpack dev server에서 제공하는 proxy는 전역적인 설정이기 때문에, 종종 해당 방법이 적용되지 않는 경우도 생긴다.

그래서 수동으로 proxy를 적용해줘야 하는 경우가 있는데, 이때 http-proxy-middleware라이브러리를 사용한다.

 

라이브러리 설치

npm install http-proxy-middleware --save

 

🔽 보기

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

 

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

export async function getAllfetch() {

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

export async function getAllfetch() {

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

 

 

---

과제2

레포지토리로 받아온 과제를 살펴보면 api2라는 폴더가 존재하고 있습니다. 실제로 프로젝트 및 실무를 할 때, 하나의 도메인이 아닌 여러 개의 도메인에서 응답을 받아와야 하는 경우가 종종 있습니다. 이럴 때는 유연하게 proxy를 설정할 필요가 있습니다.
페어와 함께 webpack dev server의 proxy 기능 대신 http-proxy-middleware의 proxy 기능을 사용하여 proxy를 유연히 설정해 2개의 도메인에서 모두 응답을 받아옵니다. 페어와 함께 api2에 관련된 fetch 함수를 만들고, 컴포넌트를 하나 이상 만들어 2개의 도메인에서 모두 응답을 받아오는지 테스트해 봅니다.

 

setupProxy.js

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

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

//위의 방법으로 적어도 되지만 여러개 받아올 경우 아래의 방법으로도 적을 수 있다.

module.exports = function(app) {
    app.use(
        ['/api','/api2'],
        createProxyMiddleware({
            target:'http://localhost:3080', //타겟이 되는 api url입력
            changeOrigin:true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
            router:{"/api2":"http://localhost:3070"}
        })
    );

};

 

BookService.js

api2에 관련된 fetch 함수도 작성해 준다.

export const getAllBooks = async () => {

    const response = await fetch('/api/books');
    return await response.json();
}


export const createBook = async (data) => {
    const response = await fetch('/api/book', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({book: data})
      })
    return await response.json();
}

export const getAllTodos = async () => {

    const response = await fetch('/api2/todos');
    return await response.json();
}

export const createTodo = async (data) =>{
    const response = await fetch('/api2/todo',{
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({todo:data})
    })
    return await response.json();
}