Node + React Basic 마무리

minsgy·2021년 1월 8일
1

node-react

목록 보기
6/11
post-thumbnail

ReactJS + Express 연결하기

React 문법에 대한 정리는 다른 강의를 보고 정리하고,
Express JS를 통해 Reqest, Response가 어떻게 진행 되는지 과정을 정리해보았다.

React + Express 요청/응답하기

서버 요청 과정에서는 React와 Express는 서로 다른 Origin(서버) 이다.

여기서 주목 할 점으로 포트가 다르기 때문에, 값이 전달이 되어있지 않아서 포트번호를 5000으로 맞췄다. 그런데..?

Request 요청이 들어왔지만 CORS POlicy에 의해 차단되었다고 한다.
이 오류는 무엇이고, 어떻게 해결해야 할까?

CORS Policy?

Cross-Origin Resource Sharing의 약자로 보안상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한하는 것.

즉, 현재 서로 다른 서버인 React 구현 부분과 Node 구현 부분에 대한 통신 보안 오류임.
이를 해결하기 위해서는 어떻게 할까?

해결 방법

  1. Jsonp(Json with Padding)을 이용하기

JSONP는 HTML의 Script 요소로부터 보안상 정책 적용이 안되는 것을 이용함. 간단하게 ajax에서의 jsonp으로 요청하면 됨. 그러나 GET 방식만 사용 가능.

  1. Proxy Server 이용

중간서버 Proxy를 이용하여 만듬. 제공하는 기능으로는 방화벽/웹필터/캐쉬데이터,공유데이터 제공 기능이 존재함. GET/POST 상관없이 전송가능함.

  1. ACcess-Control-allow-origin 설정을 통한 허용하기

REST API에 대한 허용 설정을 통해 요청/응답을 가능케함.

우리는 Proxy Server을 이용해 요청/응답 서버를 구성 할 것이다.


proxy 미들웨어 이용하기

위와 같이 client 폴더에 Proxy Setup을 통해 express 서버와 포트를 맞추어서 Origin를 임의로 바꿔버려서 접근 할 수 있게 한다.


Node+react Basic 강의는 이것으로 마무리한다.

profile
커뮤니케이션은 내 성장제🔨

0개의 댓글