[WEB] CORS (Cross Origin Resource Sharing)

개요

사이트 프로젝트 내에서 Axios Interceptors 초기 설정 기능을 맡아 개발하고 있는데,

Postman을 사용해서 테스트해봤을 때는 문제가 발생하지 않았었는데, React 내 서버와의 연결 테스트에서 CORS 에러가 발생하였다 !

 

 

이게 도대체 뭔지, 왜 발생하는 건지 궁금해서 대충 찾아봤는데 ..

• client : `localhost:3000` 포트 사용
• server: `localhost:8080` 포트 사용

서로 다른 도메인에서 요청을 하고 있기 때문에 보안상 브라우저에서 이가 제한되어 CORS Error 발생한 것이라고 한다.

그렇다면 조금 더 자세하게 알아보자❗

 

CORS란?

`CORS: Cross-origin-resource-sharing` ⇒ 교차(엇갈린) 출처 리소스 공유 정책

• Server와 Client의 코드 문제가 아님에도 발생하는 이슈
• ⇒ 웹 브라우저는 HTTP 요청에 대해서 어떤 요청을 하느냐에 따라 각기 다른 특징을 가지고 있기 때문

그럼 모든 상황에서 CORS 에서가 발생한다는 것인가 ? 그건 아니다 !

 

 

요청 방식에 따라 다른 CORS 발생 여부

1. `<img>`, `<video>`, `<script>`, `<link>` 태그 등
   • 기본적으로 Cross-Origin 정책 지원함 !
   • 다른 사이트의 리소스에 접근하는 것 가능!

   <link rel="stylesheet" href="…" />
   <script src="…"></script>
   <img src="…" />

2. XMLHttpRequest, Fetch API 스크립트
   • 기본적으로 Same-Origin 정책 지원

 

그러니까 대충 정리하면 Axios 방식의 API 호출은 Same-Origin 정책을 지원하고 있어 CORS 에러가 발생했던 것 ❗

• 자바스크립트에서의 요청은 기본적으로 서로 다른 도메인에 대한 요청을 보안상 제한
• 브라우저는 기본으로 하나의 서버 연결만 허용되도록 설정되어 있기 때문 (주로 자신의 서버)

 

Origin(출처)란?

먼저 Origin이 무엇인지에 대해 알아보자❗

• 우리가 어떤 사이트를 접속할 때 인터넷 주소 창에 우리는 URL이라는 문자열을 통해 접근
• URl은 하나의 문자열 같지만 사실은 다음과 같이 여러 개의 구성 요소로 이루어져 있음

1. Protocol(scheme): http, https
2. Host: 사이트 도메인
3. Port: 포트 번호
4. Path: 사이트 내부 경로
5. Query string: 요청의 key와 value 값
6. Fragment: 해시 태그

이때 Origin(출처)는 Protocol + Host + Port 까지 모두 합친 URL을 의미한다고 보면 된다.

console.log(location.origin); // "<https://www.naver.com>" (포트 번호 80번은 생략됨)

• Protocol + Host + Port 3가지만 동일하다면 동일 출처로 판단함
  • http ≠ https

 

출처 비교와 차단은 누가 하는 것일까?

출처 비교와 차단은 서버가 하는 것이 아닌 브라우저가 한다.

• 따라서 클라이언트 단 코드에서 API 요청을 하는 것이 아닌,
• 서버 단 코드에서 다른 출처의 서버로 API 요청을 하면 CORS 에러로 자유로워진다. ⇒ Proxy 서버

 

CORS 약자를 풀어면 Cross Origin Resource Sharing 인데, 왜 앞에 Cross Origin이 붙는걸까?!

그렇다면 Same Origin은 뭘까 ? 함 비교해보자

 

동일 출처 정책 (Same-Origin Policy)

SOP 정책 : 동일한 출처에 대한 정책 ⇒ 동일한 출처에서만 리소스를 공유할 수 있다

즉, 동일 출처 서버에 있는 리소스는 자유로이 가져올 수 있지만, 다른 출처 서버에 있는 이미지와 같은 리소스는 상호 작용이 불가능하다는 말이다.

 

 

❓❓ 동일 출처 정책이 필요한 이유

출처가 다른 두 어플리케이션이 자유로이 소통할 수 있는 환경은 꽤 위험한 환경

• 제약이 없다면 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등의 방법을 이용해서 개인 정보가 유출될 수 있음
• 따라서 악의적인 경우를 방지하기 위해 동일하지 않는 다른 출처의 스크립트가 실행되지 않도록 브라우저가 사전에 방지하는 것임!

 

CORS 정책을 지킨 리소스 요청

인터넷은 여러 사람들에게 오픈된 환경이고, 이런 환경에서 다른 출처에 있는 리소스를 가져와 사용하는 것은 매우 흔한 일이라 무턱대고 차단할 수는 없다.

따라서 몇가지 예외 조항을 두고 다른 출처의 리소스 요청이라도 이 조항에 해당할 경우 허용하기로 함

 

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

SOP 정책을 위반해도 CORS 정책에 따르면 다른 출처의 리소스라도 허용한다는 뜻

1. 클라이언트에서 HTTP 요청의 헤더에 Origin을 담아 전달
   • 요청 헤더에 `Origin` 이라는 필드에 출처를 함께 담아 보내기
   • `Origin : <http://localhost:3000>`
2. 서버는 응답 헤더에 `Access-Control-Allow-Origin`을 담아 클라이언트로 전달
   • 서버가 이 요청에 대한 응답을 할 때 응답 헤더에 `Access-Control-Allow-Origin` 이라는 필드를 추가하고, 값으로 이 리소스를 접근하는 것이 허용된 출처 url을 담아 보냄
   • `Access-Control-Allow-Origin : <http://localhost: 3000>`
3. 브라우저는 클라이언트의 Origin 필드와 서버가 보내준 `Access-Control-Allow-Origin` 필드를 비교
   • 해당 필드를 비교한 후 차단할지 말지를 결정
   • 만약 유효하지 않다면 그 응답을 사용하지 않고 버림 (CORS 에러)
   • 유효할 경우(일치할 경우) 다른 출처의 리소스를 문제없이 가져오게 됨

 

CORS 를 해결하는 방법

1. Chorme 확장 프로그램 이용
   • 로컬 환경에서 API 테스트 시 CORS 문제 해결
   • 서버 테스트 환경에서 고민하지 않고 빠르게 해결할 수 있음 (임시)
   • Allow CORS: Access-Control-Allow-Origin - Chrome Web Store
2. 서버에서 Access-Control-Allow-Origin 헤더 세팅하기
   • 직접 서버에서 HTTP 헤더 설정을 통해 출처를 허용하게 설정하는 가장 정석적인 해결책

 

 

 

---

 

( •̀ω•́ )و✧ 한 줄 컷 !

그렇다면 오늘도 면접관이 만약에 당신에게 ~

"CORS의 정의와 에러 해결 방법에 대해서 설명해주세요!" 라고 했다면 뭐라고 대답할껀가유 ??

 

 

CORS란 서로 다른 Origin 간에 자원을 공유하는 것을 말하며, 기본적으로 브라우저 간에 차단되어 있습니다.
Origin이란 출처를 의미하며, Protocol + Host + Port를 합친 것입니다.

CORS Error는 서버에서 응답 헤더에 특정 헤더를 포함하는 방식으로 해결할 수 있는데,
예를 들어 Access-Control-Allow-Origin을 통해 특정 브라우저가 리소스에 접근이 가능하도록 허용할 수 있습니다!

 

 

라고 대답하면 좋을 것 같당 ! 

 

혹시나 ~ "CORS 에러가 발생하는 과정에 대해 설명"해달라고 한다면 아래와 같이 말할 수 있을 것이다!

 

 

1. 브라우저가 HTTP 요청을 전송
2. 서버는 요청에 대한 Response 를 반환
3. 브라우저가 응답을 분석해 CORS 헤더 확인
4. CORS 헤더가 존재하면 브라우저는 자원에 대한 권한 검사를 진행
5. 권한이 허용되면 자원을 사용하고, 그렇지 않으면 CORS 에러 발생

 

 

뭐든 ~ 당황하지 말고 잘 대답하자 .. 꼬옥 ... 그럼 오늘도 끝 !