[cors 이슈] - Proxy 설정

서버 요청 시 cors 정책으로 생긴 오류 해결 방법

 

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

한 출처에서 실행 중인 웹 애플리케이션이
다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP요청을 실행

CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원한다.

최신 브라우저는 XMLHttpRequest 또는 Fetch와 같은 API에서 CORS를 사용하여 교차 출처 HTTP요청의 위험을 완화한다.

cors 오류 예시

• 오류 원인
  • server : port 5000, client : port 3000
  • 두 개의 다른 포트를 가지고 있는 서버는 아무설정 없이 request를 보낼 수 없다.
  • Cors정책 때문에.. (보안을 위해서)
• XMLHttpRequest
  • 서버와 상호작용하기 위해 사용된다.
  • 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다.
  • 페이지의 일부 업데이트 가능
  • Ajax프로그래밍에 주로 사용
• 해결 - Proxy 방법
  • Proxy 모듈 다운
    • npm install http-proxy-middleware --save
  • 사용 방법

    • // http-proxy-middleware
      
      // setupProxy.js
      
      const { createProxyMiddleware } = require("http-proxy-middleware");
      
      module.exports = function(app) {
          app.use(
              '/api',
              createProxyMiddleware({
                  target: 'http//localhost:5000',
                  changeOrigin: true,
              })
          );
      };

[cors 참고]

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

[proxy 참고]

https://create-react-app.dev/docs/proxying-api-requests-in-development/