[React] POSTMAN, OpenAPI, CORS

React – A JavaScript library for building user interfaces

 

 

 

 POSTMAN 

 

POSTMAN은 API를 테스트하기 위한 개발 도구

 

서버와의 통신을 위해 API를 활용하는 경우, React 앱으로만 요청하여 API가 잘 동작하는지 알아보는 건 비효율적이며 

수많은 API의 endpoint와 실행 조건 등을 관리하는 것도 어려운 일이다.

 

-  Auth, header, payload, query 등 API 요청에 필요한 데이터를 쉽게 세팅할 수 있다.

-  다른 개발자가 쉽게 셋업해 테스트할 수 있도록 API 정보를 공유할 수 있다.

-  Request를 모아 Collection으로 만들어 API를 종류별로 관리할 수 있다.

-  환경 변수를 정의하여 환경별로 테스트 가능하다.

 

 

Postman API Platform | Sign Up for Free

 

 

 

 

 

 

 Open API 

RESTful API를 하나의 문서로 정의하기 위한 문서 표준

 

-  OpenAPI Specification(OAS)으로 정의된다.

-  Swagger 등의 툴로 Open API로 작성된 문서를 파싱해 테스팅 도구로 만들 수 있다.

-  프론트엔드 개발자, 백엔드 개발자와의 협업 시 주요한 도구로 사용한다.

 

-  API의 method, endpoint 를 정의

-  endpoint마다 인증 방식, content type 등 정의

-  body data, query string, path variable 등 정의

-  요청, 응답 데이터 형식과 타입 정의  :  data model 활용(schema)

 

 

 

 

 

 

 CORS 

Cross-Origin Resource Sharing

 

브라우저는 모든 요청 시 Origin 헤더를 포함하고,

서버는 Origin 헤더를 보고 해당 요청이 원하는 도메인에서부터 출발한 것인지를 판단한다.

 

서버는 같은 Origin이 아닌 요청은 기본적으로 거부한다.

즉, 브라우저는 다른 Origin의 서버에 대해 Access-Control-* 헤더를 요구하고 서버는 기본적으로 해당 헤더를 보내지 않는다.

 

그러나 보통 서버의 endpoint와 홈페이지 domain은 다른 경우가 많다.

따라서 서버에서는 홈페이지 domain을 허용하여 다른 domain이라 하더라도 요청을 보낼 수 있게 한다.

 

서버는 Access-Control-Allow-Origin 외에 Access-Control-* 을 포함하는 헤더에 CORS 관련 정보를 클라이언트로 보낸다.

서버에 직접 CORS 설정을 할 수 없다면 브라우저가 아닌 같은 Origin의 Proxy 서버 등으로 요청을 보내 해결할 수 있다.

 

 

 

same-origin policy 이유는?

 

-  웹사이트에 악성 script가 로드되어 수상한 요청을 하는 것을 막기 위함이다.

-  반대로 익명 유저로부터의 DDos공격 등을 막기 위함이다.

 

 

 

 

 

---

 이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.