SEB_FE_ 블로깅 챌린지 _ 67일차 ( Proxy )

 

< CORS > - 교차 출처 리소스 공유 ( Cross-Origin Resource Sharing )

 

1. 개념 

•   CORS:  추가 HTTP 헤더를 사용해서, 실행 중인 웹 어플리케이션이 다른 출처에 접근할 수 있는 권한을 부여.

                   ( 브라우저에서 API 요청을 할 때, 현재 주소와  API 주소의 도메인이 일치해야만 접근 가능함. )

 

•   출처 ( Origin )  : 접근할 때 사용하는 URL이 모두 일치할 때 같은 출처. (프로토콜, 도메인, 포트)

          

 

 

< Proxy > 

 

1. 개념 

 : webpack dev server에서 제공하는 proxy 기능 사용(전역 설정)

 

 

2. 사용법

 

  1) package.json에 "proxy" 값 설정

"proxy" : "우회할 API 주소"

 

 

 2) 기존 fetch, axios를 통해 요청하던 부분의 도메인 부분 제거

export async function getAllfetch() {

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


export async function getAllfetch() {
                            //도메인 부분 제거
    const response = await fetch('/params');
    .then(() => {
			...
		})
}

 

 

* React Proxy 사용

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

npm install http-proxy-middleware --save

 

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

 

3) 기존 fetch, axios를 통해 요청하던 부분의 도메인 부분 제거

 

    (위 webpack dev server에서의 2) 과 동일한 방식)