[backend] CORS (Cross-Origin Resource Shari)

CORS

• SOP(Same-Origin Policy)
• CORS는 한 사이트에서 주소가 다른 서버로 요청을 보낼 시 발생하는 문제
• CORS는 브라우저 단에서 막는 것임
• 브라우저가 Origin을 따질 때에는 Scheme, Host, Port를 보고 origin을 따짐
  (https 는 443이 기본 포트)

• CORS를 위해서는 벡엔드단에서 프론트엔드의 origin을 등록해놓아야함
  허용할 origin을 Access-Control-Allow-Origin에 추가
• CORS에는 세가지 시나리오가 존재
• 1. Preflight request
  • 브라우저는 요청을 보낼 시 본 요청과 예비요청을 나누어서 보냄. 이 중 예비요청을 OPTIONS 메서드로 보내는데 이를 Preflight라고 함
  • 요청을 보내면 Response로 Access-Control_Allow_Origin과 Access-Control_Allow-Methods가 넘어오는데 이는 서버에서 어떤 origin과 어떤 method를 허용하는지 브라우저에 알려주는 역할을 함
  • 조건: Content-Type이 다음과 같은 GET, HEAD, POST 요청 (application/x-www-form-urlencoded, multipart/form-data, text/plain)

• 2. Simple Request 
  
  • 예비요청없이 서버에 바로 요청을 보내는 방법
  • 조건: GET, HEAD 요청, Content-Type 헤더가 다음과 같은 POST 요청 (application/x-www-form-urlencoded, multipart/form-data, text/plain)
    Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안됨
• 3. 
• CORS 해결방법
  1. Access-Control-Allow-Origin 세팅
  2. webpack Dev Server로 리버스 프록싱
     로컬에서 프론트엔드 어플리케이션을 개발하는 경우 위 방법을 사용

추가내용

• Cross-origin writes는 일반적으로 가능 (preflight 제외)
  write가 가능하게 하도록 설정을 그대로 두면 CSRF 공격이 발생할 수 있음
  (ex) 비밀번호 변경 api에 접근하여 변경하도록 write함 => 이 때 read할 필요가 없음)