Fetch & APIs

API

API(Application programming interface)란 한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법으로 쉽게, 식당 메뉴판이라고 생각하자. 손님(client)은 메뉴판을 보고 식당 주인(server)에게 음식(data)을 주문한다. 식당 API는 식당과 손님이 음식을 주고 받기 위한 방법. 또, 웹툰 API는 웹툰 서버와 손님이 웹툰을 주고 받기 위한 방법. 이렇듯 서버와 통신하기 위해서는 메뉴판을 미리 만들어 놔야한다.

 

RESTful API는 이러한 REST 아키텍처를 따르는 API를 의미. API를 작성하는 방법이 있음. 1. 요청 방식이 들어가 있어야한다. 2. 어떤 자료를 요청할 것인지 들어가 있어야함. 3. 파라미터가 들어가 있을 수 있다. 요약하면, API는 클라이언트가 서버와 데이터를 주고 받기 위한 방법으로, REST API를 주로 사용한다.

 

Web APIs

그러면 웹 API는 클라이언트와 서버가 데이터를 주고받기 위한 방법이다. 

CORS (Cross-Origin Resource Sharing)

CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 동일 출처 정책(Same-Origin Policy)을 우회하여 다른 도메인 간에 자원을 공유할 수 있는 메커니즘. 동일 출처 정책은 브라우저가 스크립트나 AJAX 요청을 통해 다른 출처의 자원에 접근하는 것을 제한하는 보안 메커니즘입니다. 이러한 제한을 완화하고, 브라우저에서 안전하게 다른 도메인 간의 자원 공유를 가능하게 합니다.

 

(브라우저에서) 다른 출처로의 리소스 요청을 제한하는 두 가지 정책

• SOP(Same-Origin Policy): 같은 출처로의 리소스 요청 만을 허용
• CORS: 다른 출처의 리소스 요청을 허용하는 정책

Many sites and APIs give you an error about CORS: Browsers restrict one site from accessing resources in another unless explicitly given permission

이렇게 두 개의 다른 포트를 가지고 있는 서버는 아무 설정없이 Request를 보낼 수 없다. CORS 정책 때문에 즉, 보안을 위해서! 이를 해결하는 방법은 여러가지가 있지만 그 중에서 Proxy를 사용해서 해결 할 수 있다. 아래 링크 참고!

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

Proxying API Requests in Development | Create React App

프록시 서버 사용하는 이유

1. 회사에서 직원들이나 집안에서 아이들에게 인터넷 사용 제어. 예들들어, 회사에서 직원들이 이 페이지는 접근 못하게 하거나 할 때.
2. 캐쉬를 이용해 더 빠른 인터넷 이용 제공. 프록시 서버를 이용할 경우 원래 서버까지 가지 않고 프록시 서버에서 정보를 가져올 수 있어 더 빠르다.
3. 보안측면에서 좋다. 왜냐하면 프록시 서버에서 임의로 IP주소를 바꿀 수 있다. 그래서 인터넷에서는 접근하는 사람의 IP를 모르게 된다. 
4. 이용 제한된 사이트 접근 가능