<div id="readability-page-1" class="page"><div>
 
 <div id="SE-b6b94f18-5c19-4079-9a92-dc35b2d0d5ab">
 1. 사전 요청 (Preflight Request)​이전 포스팅에서 설명한 '단순 요청' 의 조건을 만족하지 못하면 브라우저는 본 요청을 보내기 전에 '사전 요청' 을 보낸다고 설명했다.​
 </div> 
 <div id="SE-760353d3-5484-47ac-82c6-171297a98246">
 브라우저는 '단순 요청' 의 조건을 만족하지 못할 경우 이 요청이 안전한 요청인지 미리 확인을 하는 과정을 거치게 된다. 이것을 'Preflight' 사전요청이라 부르며, 해당 요청은 OPTIONS 메서드를 통해 요청하게 된다.​일반적으로 사전요청은 아래와 같은 요청과 응답 과정을 거친다.<ul><li>자바스크립트의 fetch 메서드를 통해 ajax 로 리소스를 받으려 한다.</li><li>브라우저는 options 메서드로 preflight 를 먼저 보낸다.<ul><li>Origin Header 로 출처를 보낸다. (ex. https://test.com)</li><li>Access-Control-Request-Method 헤더에 실제 요청에 사용할 메서드를 보낸다. (ex. POST)</li><li>Access-Control-Request-Headers 헤더에 실제 요청에 사용할 헤더들을 보낸다. (ex. Content-Type, X-Foo)</li></ul></li><li>서버는 preflight 요청을 받으면 서버에서 허용하는것들에 대한 정보를 아래 헤더를 통해 response 한다.<ul><li>Access-Control-Allow-Origin 헤더에 허용되는 Origin들의 목록을 설정한다.</li><li>Access-Control-Allow-Methods 헤더에 허용되는 메소드들의 목록을 설정한다.</li><li>Access-Control-Allow-Headers 헤더에 허용되는 헤더들의 목록을 설정한다.</li><li>Access-Control-Max-Age 헤더에 해당 예비 요청이 브라우저에 캐시 될 수 있는 시간을 초 단위로 설정한다.</li></ul></li><li>브라우저는 서버에 보냈던 preflight 의 헤더 정보와 서버에서 보내준 응답의 헤더 정보를 비교하여 '본 요청' 이 안전한지 (= 서버가 허용한 요청인지) 확인한다.</li><li>서버가 허용하는 요청이면 그제서야 본 요청을 보내게 된다.</li><li>서버는 본 요청에 대한 응답을 한다.</li></ul>​​2. 사전 요청 캐싱​매 요청마다 'Preflight' 요청을 먼저 보내야 한다면 보안에는 좋겠지만 요청에 대한 응답속도에는 좋지 않을것이 분명하다. 이러한 단점을 보완하기 위해 'access-control-max-age' 헤더에 캐싱할 시간을 명시해주면, 해당 시간동안은 preflight 요청에 대한 응답을 '브라우저 캐시' 에 캐싱하여 preflight 요청 없이 바로 '본 요청' 을 보낼수 있게 된다.
 </div> <div id="SE-4b67f459-7844-4a00-828c-722fee76f887">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-4b67f459-7844-4a00-828c-722fee76f887&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTEwMDNfMTA4/MDAxNzU5NTAxMDI5Mzk3.hNfsGTjG48RlW-Qj0bZcbAACiPRz3_38Glum-MA9SWEg.uxZ-xSJ1LMyBvBUQC8gTBgvPchCP5zdwXQbpJZc0et0g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-10-03_%EC%98%A4%ED%9B%84_11.17.06.png&quot;, &quot;originalWidth&quot; : &quot;417&quot;, &quot;originalHeight&quot; : &quot;415&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTEwMDNfMTA4/MDAxNzU5NTAxMDI5Mzk3.hNfsGTjG48RlW-Qj0bZcbAACiPRz3_38Glum-MA9SWEg.uxZ-xSJ1LMyBvBUQC8gTBgvPchCP5zdwXQbpJZc0et0g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2025-10-03_%EC%98%A4%ED%9B%84_11.17.06.png?type=w800" data-width="417" data-height="415" alt="">
 </a>
 
 </div>
 <div id="SE-e2faca5e-bca6-40ea-8c12-a1ac9cdff217">
 위 캡쳐화면과 같이 'access-control-max-age' 에 '600초' 를 설정하면 600초동안은 같은 요청에 대해 preflight 요청을 하지 않고도 캐시로부터 응답을 빠르게 받을수 있다.​
 </div> <div id="SE-c7a13aa2-b726-44af-84bb-8e56a4af2eff">
 <blockquote>
 Preflight 캐싱 기간은 브라우저마다 다르다. 파이어폭스 브라우저는 86400초(24시간) 까지 가능하지만 크로미엄 기반 브라우저는 7200초(2시간)가 최대이다.
 </blockquote>
 </div>
 <div id="SE-ff88947f-57c4-41b8-a2f6-45304e99dff9">
 ​#CORS #preflight #사전요청 #사전요청캐싱 #preflight캐싱 #예비요청 #http완벽가이드
 </div> </div></div>

나만의공간。

KIM JUNGHWAN

1. 사전 요청 (Preflight Request) 이전 포스팅에서 설명한 '단순 요청' 의 조건을 만족하지 못하면 브라우저는 본 요청을 보내기 전에 '사전 요청' 을 보낸다고 설명했다. 브라우저는 '단순 요청' 의 조건을 만족하지 못할 경우 이 요청이 안전한 요청인지 미리 확인을 하는 과정을 거치게 된다. 이것을 'Preflight' 사전요청이라 부르며, 해당 요청은 OPTIONS 메서드를 통해 요청하게 된다. 일반적으로 사전요청은 아래와 같은 요청과 응답 과정을 거친다. 자바스크립트의 fetch 메서드를 통해 ajax 로 리소스를 받으려 한다. 브라우저는 options 메서드로 preflight 를 먼저 보낸다. Origin Header 로.......

[HTTP] 사전요청 - Preflight Request

댓글