TIL - 20220917

 오늘은 모던 JavaScript 튜토리얼에서 CORS에 대해 공부했다. 작성한 질문은 다음과 같다.

 크로스 오리진 요청은 다음과 같은 요청들이 있다.

• 안전한 요청
• 안전하지 않은 요청

 

 안전한 요청은 다음 조건들을 충족해야 한다.

• 메서드는 GET, POST, HEAD 중 하나여야 한다.
• 헤더는 Accept, Accept-Language, Content-Language, 값이 application/x-www-form-urlencoded나 multipart/form-data, text/plain인 Content-Type

 

 안전한 요청은 다음 절차를 따른다.

• 오리진 정보가 담긴 Origin 헤더와 함께 브라우저가 요청을 보낸다.
• 자격 증명이 없는 요청의 경우, 서버가 Origin 값과 동일하거나 *인 Access-Control-Allow-Origin 응답을 보낸다.
• 자격 증명이 있는 요청의 경우, 서버는 Origin 값과 동일한 Access-Control-Allow-Origin 값이 true인 Access-Control-Allow-Credentials 응답을 보낸다.

 

 안전하지 않은 요청은 다음 절차를 따른다.

• 먼저, 사전 요청 'preflight'이 본 요청 전에 전송된다.
• 브라우저가 동일한 URL에 OPTIONS 메서드를 사용한 preflight 요청을 보내는데 이 때 헤더엔 본 요청의 메서드 정보가 담긴 Access-Control-Request-Method와 본 요청의 헤더 정보가 담긴 Access-Control-Request-Headers가 들어간다.
• 서버는 상태 코드 200과 함께 허용되는 메서드 목록이 담긴 Access-Control-Allow-Methods 허용되는 헤더 목록이 담긴 Access-Control-Allow-Headers, 몇 초간 preflight 요청 없이 크로스 오리진 요청을 바로 보낼 지에 대한 정보가 담긴 Access-Control-Max-Age 헤더를 담은 응답을 전송한다.
• 이후엔 본 요청이 전송되고, 절차는 안전한 요청과 동일하다.