[React] Proxy서버 이용 + 사이드서버(Node.js) 이용하기

 

문제발생 

개요 ) 멀쩡하게 돌아가던 데이터가 깃배포 이후 에러가 발생했다.

 

WHY?  SOP (Same Origin Policy, 동일 출처 정책)으로 인한 CORS 오류 발생이었다.

SOP 정책이란? 자바스크립트 엔진 표준 스펙의 보안 규칙중, 하나의 출처 (Origin)에서 로드된 자원(문서나 스크립트)이 일치하지 않는 자원과 상호작용하지 못하도록 요청 발생을 제한하는 정책이다.

쉽게 말해, 본인의 경우 HTTPS 작업환경에서 HTTP 데이터를 끌어오려니 에러가 발생한 것이었다.

 

여기서 동일출처의 기준이란?  Protocol, host, port 가 같아야 동일한 출처라 할 수 있다.

ex. http(Protocol)//localhost(host):8000(port) 

 

 

그렇다면 다른 출처의 리소스가 필요하다면 어떻게 해야 할까? CORS (Cross Origin Resource Sharing, 교차 출처 리소스 공유)

CORS는 다른 출처의 자원의 공유를 가능하게 만든다. 또한 추가 HTTP 헤더를 사용해 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

이는 즉 CORS 에러는 브라우저가 내는 것이다 ( 그래서 배포이전엔 에러가 발생하지 않았었다. )

 

1. CORS 에러 해결하기 

CORS에러는 클라이언트에서 Server(api)에 접근하여 리소스를 가져올 때 출처가 같지 않으면 브라우저가 CORS 에러를 낸다.

CORS ERROR는 Server에서 해결할 수도 있고 , Client에서 해결 할 수도 있다.

 

** 클라이언트에서 해결하기 -> Proxy 서버를 이용한다 

_주의사항 ) proxy 서버는 로컬서버 즉, 개발할때만 사용이 가능하다 

 

프록시서버란? 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 서버를 가리킨다. Front에서 Cors에러를 핸들링하는것은 서버로 가기전에 프록시서버를 거쳐 출처를 response와 같게 수정하고, Sever에 접근하도록 하는 것

 

1. npm i http-proxy-middleware  설치 

2. setupProxy.js 세팅

 

endpoint란 ? 

만약 호출할 API 주소가 ex. https://localhost/8000/subwayApi 인 경우, protocol, host, post 이후의 path 자리( = /subwayApi )_ 사이트 내부경로를 의미한다.

그러므로 여기서 1) createProxyMiddleware는 subwayApi 를 엔드포인트로 호출하는 api를 모두 매칭시킨다. 

2) target에는 URL의 endpoint를 제외한 출처만 명시한다.ex. https://localhost/8000/subwayApi 인 경우,  https://localhost/8000 만을 명시

3) changeOrigin 의 경우, 호스트 헤더의 출처를 대상 URL로 변경하는지에 대한 여부이다. CORS처리를 위해 출처를 수정해주어야 하므로 true값을 명시. 기본값은 false이다.

 

 

API를 불러오는 컴포넌트내 POST형태로 api 호출하기 

 

 

 

** Server 로 해결하기 >> cors를 통해 Access-Control-Allow-Origin 문제를 설정하고 해결한다.

 

그러나, 본인의 경우 api의 조건을 가공해야해서 proxy서버가 아닌 사이드 서버를 통해 사용하기로 했다.

node.js를 통한 서버를 이용하기로 하고, Server.js를 작성했다. 

 

npm i cors

npm i express 

 

 

cors 설정 해석 ) 

1) Origin : *  _ Access-Control-Allow-Origin 의 값으로 * 을 사용해 오는 요청을 모두 허용함을 명시

2) Credentials : true _ 응답헤더에 Access-Control-Allow-Credentials 추가

3) optionSuccessStatus: 200 _ 응답상태를 200으로 설정

 

express.urlencoded({extended:false}) 의 경우,  body-parser의 오류를 개선하기 위해 extended 옵션을 부여함으로 Node.js에 내장된 querystring모듈을 사용하도록 허용한다.

 

 

이렇게 코드를 작성한 이후,  깃허브 페이지 배포를 시도하자 정상적으로 작동하였다. 그러나, 서버를 종료하는 순간 배포사이트가 작동하지 않았다. 이러한 문제와 관련해서는 node.js 관련 pm2 에서 다루어보겠다.