CORS

- Cross-Origin Resource Sharing

• 라우저에서 다른 출처의 리소스를 공유하는 방법

Origin(출처)?

• origin이란 url 구조처럼 Protocol, Host, Port를 합친것을 말함. => location.origin 명령어를 브라우저 콘솔창에서 실행하면 출처 확인 가능
• Protocol, Host, Port가 모두 동일해야 같은 출처
  - ex) http://naver.com/a
  === http://naver.com/b
  !== https://naver.com/b
  !== https://google.com/b

CORS 동작원리

• 단순 요청 방법과 예비 요청을 먼저 보내는 방법 2가지 방법

• Simple Request

  • 서버에게 바로 요청을 보내는 방법
  • 서버에 API를 요청 -> 서버에서 Access-Control-Allow-Origin 헤더를 포함한 응답 -> 브라우저에서 Access-Control-Allow-Origin 헤더를 확인후 CORS 동작할지 판단
  • 요청 메서드(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 만 허용

• Preflight Request

  • Options를 먼저 보내 안전한지 판단한 후 본 요청을 보내는 방법
  • 서버에 Options 메서드로 예비요청 -> 서버에서 Access-Control-Allow-Origin 헤더를 포함한 응답 -> 브라우저에서 Access-Control-Allow-Origin 헤더를 확인 후 CORS 동작할지 판단

CORS 에러 해결방법

• Access-Control-Allow-Origin: <origin> | * 으로 허용된 출처만 리소스에 접근할 수 있도록 적용
• Access-Control-Allow-Methods: <method>[, <method>]* 특정 메소드만 접근 가능하도록 적용
• Access-Control-Expose-Headers: <header-name>[, <header-name>]* 브라우저의 자바스크립트에서 헤더에 접근할 수 있도록
• Access-Control-Allow-Headers: <header-name>[, <header-name>]* 커스텀 헤더 사용시
• Access-Control-Max-Age: <delta-seconds> Preflight 요청 결과를 캐시할 수 있는 시간
• Access-Control-Allow-Credentials: true 자바스크립트 요청시 credentials 가 include일때 요청 응답이 가능하도록 설정 (defalut -> false)