🕶️ CORS 에러 공부하기

오늘은 서버와 연동에서 한번쯤은 경험한다는 에러 이다.

나는 아직 서버와 연동 경험이 적어,

격어보지 못했지만...

미리 알아보자.

---

 

Cross Origin Resource Sharing

CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘이다.

 

 

왜 CORS가 생겼을까?

그럼 왜 CORS가 필요하게 됐을까?
이전에는 동일한 도메인에서 리소스를 받아왔는데,

지금은 클라이언트에서 도메인이 다른 서버에서 제공하는 API를 사용하는 일이 많아졌다.
그래서 이전처럼 동일한 도메인간의 요청만 할 수 없어졌고 CORS가 생겼다.

 

 

동작 방식

동일 출처 정책은 브라우저에서 임의로 하는 것이다. 즉 브라우저를 통하지 않고 요청을 보내거나 브라우저에서 동일 출처 정책이 아니라면, 동일 출처가 아니라도 요청을 보내고 응답을 받을 수 있다. 그럼 브라우저에서는 다른 출처로 요청을 보낼 때 어떻게 동작할까?

 

브라우저는 다른 출처로 요청을 보낼 때 다음과 같은 절차를 거친다. 우선 다른 출처라도, 다 같은 방식으로 동작하지 않는다. CORS 요청에는 simple request와 preflighted request 두 가지가 있다.

 

동일 출처 정책은 동일한 출처의 리소스에만 접근하도록 제한하는 것이다. 여기서 출처는 프로토콜, 호스트명, 포트가 같다는 것을 의미한다.

 

Simple request

simple 요청은 pre-flighted 요청을 보내지 않는다.

 

simple request란 무엇인가.

GET 요청, HEAD, POST 중의 한 가지 방식을 사용

POST 방식일 경우 conte-type이 아래 셋 중 하나여야 한다.

application/x-www-form-unlencoded

multipart/form-data

text/plain

 

 

Preflighted request

preflighted 요청은 simple request와는 다른 유형의 CORS 요청이다.

브라우저에서 진짜 요청을 보내기 전에 미리 확인 요청을 보낸다.

이 요청은 OPTIONS 메소드를 사용한다.

 

 

 

에러 해결하기

에러 메세지

 

클라이언트에서 해결하기

 

1. 웹 브라우저 실행 옵션이나 플러그인을 통한 동일 출처 정책 회피하기

동일 출처 정책은 브라우저에서 임의로 하는 것이기 때문에 브라우저에서 동일 출처 정책을 사용하지 않으며 된다.

 

2. jsonp 방식으로 json 데이터 가져오기

자바스크립트 파일이나 css 파일은 동일 출처 정책에 영향을 받지 않고 가져올 수 있다.

이를 이용해서 자바스크립트 파일을 가져와서 이를 json 형식으로 파싱해서 데이터를 사용할 수 있다.

 

이정도로 정리할 수 있겠다.

아직 제대로 경험해 보지 못했지만...

걸리고싶지 않은 오류이다.

그래도 한번 경험이 필요한 부분이라 생각한다.

그래서 프로젝트하러 가보겠다.

끝.