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

CORS란?

브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한합니다. 그래서 cross-origin 요청을 하려면 서버의 동의가 필요합니다. 만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절합니다.

이러한 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데, 이를 CORS(Cross-Origin Resource Sharing)라고 부릅니다.

즉 클라이언트와 서버의 서로다른 포트끼리의 통신을 하려면 CORS이슈가 발생하는데  

브라우저에서 리소스를 허용하고자 할때 다른포트에서 온 정보에 대해서 보안적인 규칙을 지켜야 한다는 의미입니다

 

• 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다
• 브라우저는 보안 상의 이유로, 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.
  ex) domain-a.com ↔domain-b.com 간의 요청은 CORS 정책 위반으로, 브라우저에서 요청을 제한)
• 따라서 다른 출처의 리소스를 불러오기 위해서는, 그 출처에서 교차 출처 리소스 공유에 대한 헤더(CORS)를 응답시 반환 해주어야 한다

<이해를 돕기 위한 예시>

프론트 엔드 개발시 프론트엔드 서버를 만들어서 백엔드 서버와 통신할 때 주로 CORS 에러를 마주하는데 ,이를 해결하기 위해 프론트엔드에서 프록시 서버를 만들기도 합니다

 

예를 들어 프론트엔드에서는  127.0.0.1:3000 으로 테스팅을 하는데 백엔드 서버는 127.0.0.1:12010 이라면 포트번호가 다르기 때문에 CORS 에러가  나타납니다 

 

<CORS 에러해결법>

 

이때 프록시 서버를 둬서 프론트 엔드 서버에 요청되는 오리진을 127.0.0.1:12010 으로 바꾸는 것입니다.

프론트 엔드 서버앞단에 프록시 서버를 놓아 /api 요청은 users API, /api2 요청은 users API2에 요청할 수 있습니다.

이로써 CORS 에러 해결은 물론이며 다양한 API 서버와의 통신도 매끄럽게 할 수있게 됩니다.

 

오리진 : 프로토콜과 호스트이름 , 포트의 조합을 말한다 . 예를 들어 https ://dsdsds.com:123/text 라는 주소에서 오리진은  https ://dsdsds.com:123/를 뜻한다 

<구체적인방법>

 

설치

npm i http-proxy-middleware --save