S4 unit10 | react에서 Proxy로 CORS 에러 피하기

📌 CORS 정책

교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

 

웹 콘텐츠의 출처(Origin)

: URL의 스킴(프로토콜), 호스트(도메인), 포트

 

동일 출처란 스킴, 호스트, 포트가 모두 일치하는 출처를 말한다. 

CORS 정책에 따른 데이터 흐름

백엔드에 프론트엔드 도메인 허용 요청을 해두고 응답 헤더에 필요한 값을 전달받아야 한다.

 

📌 Proxy

: CORS 정책 위반 에러를 회피하는 방법 중 하나이다.

 

Proxy를 이용한 데이터 흐름

프록시는 요청이 동일한 출처에서 온 것처럼 속여준다.

따라서 CORS 에러가 나지 않는다.

---

Proxy 사용 방법

React 라이브러리, Webpack Dev Server에 Proxy 기능 존재

 

 

💛 Webpack Dev Server proxy

웹팩 개발서버의 proxy 설정은 웹팩 설정을 통해 적용하지만,

Create-react-app을 통해 만든 리액트 프로젝트에서는 package.json에서 "proxy" 값을 설정한다.

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

기존의 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 (http-proxy-middleware 라이브러리)

여러 개의 api에 요청을 보내야 할 때 사용한다.

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

npm install http-proxy-middleware

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

3. 기존의 fetch, axios 요청에서 도메인 부분을 제거한다.

export async function getAllfetch() {

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

export async function getAllfetch() {

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