CORS

- Cross-Origin-Resource Sharing의 약자로, 브라우저에서 다른 출처의 리소스를 공유하는 방법을 뜻함

 

- URL 구조

 

- 출처(Origin)란?

1. 출처란 URL 구조에서 살펴본 Protocal, Host, Port를 합친 것을 말함(출처를 알아보기 위해선 콘솔창에 (location.origin)을 실행해보면 출처를 확인 가능

   2. 출처가 같다는건 URL구조에서 Protocal, Host, Port가 동일하다는걸 의미, 셋중 하나라도 다르다면! 다른 출처가 되는         것!

 

왜 CORS policy 오류가 나오는가?

- 단순 Postman이나 다른 서버에서 API를 호출할 때는 멀쩡히 잘 동작하는데 브라우저에서 API를 호출할 때만 CORS policy 오류가 발생해서 당혹스러울 때가 있음

- 이는 브라우저가 동일 출처 정책(Same-Origin Policy, SOP)를 지켜서 다른 출처의 리소스 접근을 금지하기 때문!

• 보안 취약점을 노린 공격을 방어할 수 있다는 장점이 있지만, 외부 리소스를 참고하는 것은 필요하기 때문에 외부 리소스를 사용하기 위한 SOP 예외 조항이 CORS!

 

 

CORS 동작원리

1. Simple request(단순요청)

• 단순요청은 서버에게 바로 요청을 보내는 방법!
• 서버에 API를 요청하고, 서버는 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에게 보냄.
• 브라우저는 Access-Control-Allow-Origin 헤더를 확인 후 CORS 동작을 수행할 지 판단

Simple request 조건

//////////////////////////////////////////////////////////////////

• 요청 메서드(method)는 GET, HEAD, POST 중 하나여야 합니다.
• Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안 됩니다.
• Content-Type 헤더는 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나를 사용해야 합니다.

//////////////////////////////////////////////////////////////////

** 첫번째 조건은 어렵지 않지만, 2번은 Authorization 헤더가 포함되지 않아 사용자 인증에 까다롭고, 3번 조건은 많은 REST API들이 Content-Type으로 application/json을 사용하기 때문에 지켜지기 어려운 조건이다!**

 

2. Preflight request

• Preflight 요청은 서버에 예비 요청을 보내서 안전한지 판단한 후, 본 요청을 보내는 방법
• Preflight 요청은 실제 리소스를 요청하기 전에 OPTIONS라는 메서드를 통해 실제 요청을 전송할지 판단
• 예비요청을 통해 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저는 받고 헤더를 확인 후 CORS 동작을 수행할지 판단

 

CORS ERROR 해결법

HTTP 응답 헤더

1. **Access-Control-Allow-Origin: <origin> | ***

• origin자리에 접근 할 리소스의 url을 작성 하거나, *(와일드 카드)를 작성하여 출처 상관없이 모든 리소스에 접근할 수 있게 함

2. Access-Control-Allow-Methods: <method>[, <method>]*

• Access-Control-Allow-Methods 헤더에 HTTP 메서드를 넣어줌

3. Access-Control-Max-Age: <delta-seconds>

• Preflight 요청 결과를 캐시 할수 있는 시간을 나타낼 수 있다
• 초 단위로 캐시 시간을 설정함

기타 해결 방법

1. JSONP

2. 프록시 서버

• FE와 BE 사이에 프록시 서버를 두어 CORS ERROR를 해결 가능.
• Webpack Dev Server 등의 라이브러리를 사용하여 프록시 설정을 하는 방법이 존재

 

 

출처: https://beomy.github.io/tech/browser/cors/

출처: https://xiubindev.tistory.com/115

출처: https://bohyeon-n.github.io/deploy/web/cors.html