CORS 에러 정리(2)_시나리오

CORS 시나리오

1. simple request

• Prefilght를 생략하고 바로 서버에 요청을 보내서 CORS에러 검사
• 3가지 조건이 만족해야한다.
  1. 요청은 GET, HEAD, POST 메서드 중에 하나
  2. Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 헤더일 경우 에만 적용된다.
  3. Content-Type 헤더가 application/x-www-form-urlencoded, multipart/form-data, text/plain중 하나여야한다.

 

2. preflight request

1. 브라우저는 서버로 HTTP OPTIONS 메소드로 예비 요청(Preflight)을 먼저 보낸다.
   • Origin 헤더에 자신의 출처를 넣는다.
   • 헤더에 실제 요청에 사용할 메소드와 헤더들을 설정한다.
     • Access-Control-Request-Method / Access-Control-Request-Headers
2. 서버는 제한 목록을 Header 정보에 담아 브라우저에 보내준다.
   • 허용되는 Origin, 메소드, 헤더,예비 요청이 브라우저에 캐시될 수 있는 시간을 보내준다.
     • Access-Control-Allow-Origin / Access-Control-Allow-Methods / Access-Control-Allow-Headers / Access-Control-Max-Age
   • 캐시 시간이 만료될 때까지는 예비 요청이 서버에 전달되지 않고 캐시된 응답을 사용한다.
3. 서버의 응답과 비교해 안전한 요청인지 확인 후 본 요청을 보낸다.
4. 본 요청의 서버 응답을 자바스크립트로 넘겨준다.

 

3. credentialed request

• 클라이언트에서 서버에게 쿠키(Cookie)혹은 Authorization헤더에 설정하는 토큰 값등을 실어 요청할때 사용되는 요청
  • 요청에 인증과 관련된 정보를 담을 수 있게 해주는 credentials 옵션을 사용
• 응답의 Access-Control-Allow-Origin 헤더가 와일드카드(*)가 아닌 분명한 Origin으로 설정되어야 하고, Access-Control-Allow-Credentials 헤더는 true로 설정되어야 한다.

 

 

 

출처)

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F