[CS] CORS의 개념,특징,에러해결방법에 대해 알아보자

리액트 개발환경에서 백엔드와 협업한 경험이 있다면 CORS 에러 한번쯤은 만나본 기억이 있을것이다. 그렇다면 CORS란 무엇인가?

 

🎈CORS란?

: 직역하면 교차 출처 리소스 공유라고도 하며 Cross-Origin Resource Sharing(CORS) 라고 읽고 쓴다. 

추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

 

EX) 

https://eunbin.com의 프론트엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://ex.com/code.json을 요청하는 경우. 

 

보안 상을 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따른다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 CORS 헤더를 포함한 응답을 반환해야 한다.

🎈 CORS 체제의 역할

브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원하는데 즉, 보안상의 이유로 서로 다른 출처간의 리소스를 전달하는 과정을 제어하는 체제라고 할 수 있다.

---

🎈 그렇다면 출처(Origin)을 다르다고 판단하는 경우는?

EX) https://eunbin.com:0218/data/1/ 

• https
• 프로토콜 : eunbin.com
• 도메인(호스트) : 0218
• 포트넘버 : /data/1/

위의 URL의 구성요소를 나열하였는데 출처를 구분하는 기분은 프로토콜, 호스트, 포트넘버 이다.

 

🎈 CORS 요청을 주고받는 방법

Option 메서드를 통해 도메인의 리소스로 HTTP요청을 보내 실제 요청을 안전하게 요청할 수 있는지 확인한다.

이 과정을 거치는 이유는 아무 클라이언트나 서버에 접근해 유저 데이터에 영향을 미치는 것을 방지 하기 위함이고,

이것을 Preflight요청이라고 한다.

1.  미들웨어 설치 및 설정 ( 프론트와 백엔드 모두 해당)
2.  프록시방식 설정 : 브라우저에서 프론트서버로 요청 -> 프론트 서버에서 백엔드 서버로 요청
3.  이어서 프론트엔드 요청헤더의 Access-Control-Allow-Origin 옵션 사용

🎈 프론트엔드와 백엔드의 CORS 상호작용의 특징

• 같은 Origin에서 데이터를 요청하면 CORS 문제는 발생하지 않는다
• 클라이언트는 서버가 어떤 Origin요청을 허용하는지 알 수 없다
• 클라이언트에서 요청을 보낸 후, 서버로부터 받은 Access-Control-Allow-Origin 헤더 속성을 통해 접속 가능 여부를 확인한다
• 서버는 응답 헤더에 가능한 출처의 목록과 요청 가능한 메소드들의 종류를 보내준다

---

🎈 CORS 에러 해결방법

[1] 서버에서 CORS 허용해주기

: 보편적으로 가장 잘 발생하는 에러고, 잘 해결되는 에러이기도 하다.Access-Control-Allow-Origin 헤더에 클라이언트 출처를 허용해주면 되는데, Open API를 사용하는 경우 에러해결방법은 다르다.

 

[2] 프록시 서버 사용하기

: 서버를 직접 제어할 수 없는 상황이라면 프록시 서버를 사용하는 방법이 있다. 즉, 위에서처럼 Open API를 사용하는 경우에 해당된다.

CORS 정책은 브라우저에서 강제적으로 적용되는 체제이므로 서버에서 브라우저에 몇몇 조건이 걸린 헤더들을 내려주면 브라우저는 SOP를 지키며 작업을 처리하지만 프록시 서버는 다른데 그 이유는 서버 간 통신에서는 이 정책이 적용되지 않는다.

 

또한, 프록시 서버는 클라이언트에게 응답을 보낼 때 Access-Control-Allow-Origin의 출처로 요청도메인의 출처를 포함시켜주면 되기 때문에 CORS 문제를 해결할 수 있다.

 

[3] https-proxy-middleware 라이브러리 설치

: 개발 중에 로컬 환경에서 클라이언트와 서버의 출처 포트넘버가 달라 CORS 에러가 발생한 경우에 사용되는 방법이다. 

 

 

References

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#%EC%96%B4%EB%96%A4_%EC%9A%94%EC%B2%AD%EC%9D%B4_cors%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EB%82%98%EC%9A%94

교차 출처 리소스 공유 (CORS) - HTTP | MDN

https://velog.io/@yunsungyang-omc/React-React-App%EC%97%90%EC%84%9C-CORS-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

(React) React App에서 CORS 이슈 해결하기

https://velog.io/@kansun12/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-CORS

[프론트엔드] CORS의 유래 및 특징, 활용