2022-02-09 CORS 리뷰 및 적용

CORS의 등장

 

이전의 브라우저 정책으로는 오리진이 다르면 요청을 주고 받을 수 없었음. 허나

 

요즘시대에는 클라이언트에 유튜브 API, 카카오 API 등 여러 외부 API들을 찾아 와야함.

 

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

 

cross origin에서 리소스(서버자원)을 사용한다!

 

근데... 당연히 서버에서 내려준 클라이언트가 아닌데 남의 것을 누구마음대로 열어줌? 

 

그래서 브라우저에서는 보안상의 문제를 이유로 크로스 도메인 요청은 기본적으로 제한 되어있었다.

 

그러나 불편하잖아? 웹 애플리케이션 고도화를 위해 개선 요청!

 

그래서 서버가 Allow 한 범위내에서 cross origin을 허용!

 

 

HTTP OPTION

크로스 오리진 요청을 보내는 작업은 서버로 한번만 요청을 보내는게 아니다.

 

실질적으로 2번 요청을 보낸다.

 

왜 쓸 때 없이 2번이나 요청을 보내느냐? OPTION 메소드를 이용해 이 요청을 서버에서 허용해줄 것인지

 

물어보고 그 답에 따라 GET ,POST 등의 요청을 보내고 응답을 받는다.

 

 

- 스프린트에서 이짤을 많이 보게 될건데 이것을 해석하면

 

1. 어떤 origin을 허용해줄거냐? '*' 와일드카드 => 모든 도메인을 허용한다.

2. 메소드는 GET POST PUT DELETE OPTIONS만 허용한다.

3. 헤더에는 content-type과 accept만 쓸 수 있다.

4. preflight request(?)는 10초 까지 허용 된다.

 

prefilght request(사전 요청)

 

- 교차 출처 리소스 공유 사전 요청은

 

본격적인 교차 출처 HTTP 요청 전에 서버 측에서 그 요청의 메서드와 헤더에 대해 인식하고 있는지를 체크하는 것.

 

예를 들어, 클라이언트는  DELETE 요청을 하기 전에 사전 요청을 통해

 

서버가 HTTPMethod("DELETE")을 허용하는지 물어볼 수 있습니다.

OPTIONS /resource/foo
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org

 

 

 

 

 

 

참조 :https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

사전요청 참조:  https://developer.mozilla.org/ko/docs/Glossary/Preflight_request