Proxy 설정해 HTTP 통신하기

hzn·2022년 12월 10일

Deploy

목록 보기

7/10

1. webpack dev server 사용

한 개의 (백엔드 서버) 도메인에서만 응답을 받아오면 되는 경우

0) 구현 내용

api : 백엔드 개발 서버 역할

my-app : 프론트엔드 개발 서버 역할

Get all Books 버튼 클릭하면 데이터 받아오도록 구현할 것

현재는 CORS 설정 또는 Proxy 설정이 되어있지 않으므로 CORS 에러가 나는 상태.

1) package.json에서 Proxy 설정

my-app > package.json

...
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy" : "http://localhost:3080" // 우회할 API 주소
}

2) API 요청에서 도메인 제거

도메인 제거 전

my-app > src > service > BookService.js

export const getAllBooks = async () => {

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

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

도메인 제거 후

my-app > src > service > BookService.js

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();
}

3) Proxy로 우회해서 HTTP 요청 받아오기

이제 CORS 에러 없이 데이터를 잘 받아올 수 있다.

2. http-proxy-middleware 사용

여러 개의 (백엔드 서버) 도메인에서 응답을 받아와야 하는 경우
http-proxy-middleware를 사용해 유연하게 proxy를 설정한다.

0) 구현 내용

api : 백엔드 개발 서버 1 역할

api2 : 백엔드 개발 서버 2 역할

my-app : 프론트엔드 개발 서버 역할

Get all Books 버튼 클릭하면 Book 데이터 받이오기

Get all Todos 버튼 클릭하면 Todo 데이터 받이오기

1) http-proxy-middleware 라이브러리 설치

npm install http-proxy-middleware --save

2) setupProxy.js 파일 작성

src > setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware'); // 라이브러리 불러오기

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

3) API 요청에서 도메인 제거

src > services > BookService.js

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();
};

src > services > TodoService.js

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();
};