Proxy를 사용한 CORS Error 방지

🔆 CORS 정책의 필요성

• CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)
  : 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
• 출처: URL의 스키마(프로토콜), 호스트(도메인), 포트로 정의
  • 프로토콜, 호스트, 포트 모두 일치해야 같은 출처

• 브라우저는 기본적으로 하나의 출처가 다른 출처의 자원에 접근하지 못하도록 막고 동일한 출처에서만 접근이 가능한 SOP(Same-Origin Policy, 동일 출처 정책)을 채택하고 있다. 만약 CORS 설정 없이 하나의 출처에서 다른 출처에 자원에 접근하려 할 경우 위의 사진과 같이 에러가 발생하게 되는데 이를 방지하기 위해 별도의 CORS 설정이 필요하다.

🔆 CORS 에러를 해결하는 방법

🏷 정석적인 방법

• 추가 HTTP 헤더를 설정하여 특정 도메인을 허용하도록 구현
  • 프론트엔드 개발자 → 백엔드 개발자: 프론트엔트 개발 서버 도메인 허용 요청
  • 백엔드 개발자 → 프론트엔드 개발자: 응답 헤더에 필요한 값들을 담아서 전달

🏷 우회적인 방법

• proxy 기능 사용
  • 브라우저 → React 앱: 데이터 요청
  • React 앱 → 백엔드(서버): 해당 요청 전달
  • 백엔드(서버) → React 앱: 응답 데이터 전송
  • React 앱 → 브라우저: 서버로부터 받은 응답 데이터를 전달
    • 브라우저는 React앱으로부터 데이터를 전달받기 때문에 CORS 정책 위반 사실을 모름
    • proxy 기능을 통해 브라우저를 속이는 것

🔆 proxy 기능

• proxy 적용 전 흐름
  
• proxy 적용 후 흐름
  

💡 Proxy 사용법

webpack dev server proxy
: webpack dev server에서 제공하는 proxy 기능 사용

• CRA(create-react-app)을 통한 리액트 프로젝트

  • package.json에서 "proxy" 값 설정

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

• 기존의 fetch나 axios를 통해 요청하던 부분에서 도메인 부분 제거

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

http-proxy-middleware 사용

• http-proxy-middleware 라이브러리 설치

  npm install http-proxy-middleware --save

• React 앱의 src 파일 안에서 setupProxy.js 파일을 생성
  → 파일 안에서 설치한 라이브러리 불러오기
  → proxy middleware 사용

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

• 기존의 fetch나 axios를 통해 요청하던 부분에서 도메인 부분 제거

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