<div id="readability-page-1" class="page"><div>
                <p><a href="/m/category/Data%20Engineering%20%20%EB%B0%8F%20Infra"><span>Data Engineering  및 Infra</span></a></p><h3>Python FastAPI에서 CORS 적용하기 ( Feat. CORS란? )</h3>
              </div><p><cite>이수진의 블로그</cite>
                <span> 2023. 10. 20. 09:15</span>
              </p><div>
                                <h2 data-ke-size="size26">포스팅 개요</h2>
<p data-ke-size="size16">본 포스팅은 Python FastAPI에서 CORS(Cross Origin Resource Sharing)을 처리하는 방법에 대해서 정리합니다.</p>
<p data-ke-size="size16">추가로 CORS가 무엇인지 간략하게 설명하고 CORS가 왜 필요한지도 간단하게 정리하겠습니다.</p>
<p data-ke-size="size16">참고로, CORS에 대한 설명은 FastAPI 공식 튜토리얼 페이지에 잘 나와있으니 참고하셔도 좋을 것 같습니다!</p>

<p data-ke-size="size16">본 글에서 참고한 자료는 다음과 같습니다.</p>
<ul data-ke-list-type="disc">
<li><a href="https://fastapi.tiangolo.com/tutorial/cors/" target="_blank" rel="noopener&nbsp;noreferrer">https://fastapi.tiangolo.com/tutorial/cors/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank" rel="noopener&nbsp;noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS</a></li>
<li><a href="https://www.tutorialspoint.com/fastapi/fastapi_cors.htm" target="_blank" rel="noopener&nbsp;noreferrer">https://www.tutorialspoint.com/fastapi/fastapi_cors.htm</a></li>
</ul>
<figure id="og_1697708446219" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="CORS (Cross-Origin Resource Sharing) - FastAPI" data-og-description="FastAPI framework, high performance, easy to learn, fast to code, ready for production" data-og-host="fastapi.tiangolo.com" data-og-source-url="https://fastapi.tiangolo.com/tutorial/cors/" data-og-url="https://fastapi.tiangolo.com/tutorial/cors/" data-og-image="https://scrap.kakaocdn.net/dn/2ika0/hyUgTx0dSK/sLLkas5S4NSpgyyCTvLKBk/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630,https://scrap.kakaocdn.net/dn/ClToh/hyUgK8R7K3/RiR031PYGn1V7X1a5EZCYK/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630"><a href="https://fastapi.tiangolo.com/tutorial/cors/" target="_blank" rel="noopener" data-source-url="https://fastapi.tiangolo.com/tutorial/cors/">

<div>
<p data-ke-size="size16">CORS (Cross-Origin Resource Sharing) - FastAPI</p>
<p data-ke-size="size16">FastAPI framework, high performance, easy to learn, fast to code, ready for production</p>
<p data-ke-size="size16">fastapi.tiangolo.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/2ika0/hyUgTx0dSK/sLLkas5S4NSpgyyCTvLKBk/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630,https://scrap.kakaocdn.net/dn/ClToh/hyUgK8R7K3/RiR031PYGn1V7X1a5EZCYK/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630"></figure>
<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style7">
<h2 data-ke-size="size26">포스팅 본문&nbsp;</h2>
<p data-ke-size="size16">포스팅 개요에서 말씀드린 것처럼 본 포스팅은 Python FastAPI에서 CORS를 처리하는 방법에 대해 정리합니다.</p>
<p data-ke-size="size16">먼저, CORS란 무엇인지 정리하고 FastAPI에서 어떻게 활용할 수 있는지 예제 코드와 사진을 통해 살펴보겠습니다.</p>
<h3 data-ke-size="size23">CORS란?</h3>
<p data-ke-size="size16">먼저, CORS란 무엇인지 살펴보겠습니다. CORS(Cross Origin Resource Sharing)란 한국어로 하면 "교차 출처 리소스 공유"로 해석될 수 있을 것 같습니다. 도대체 무슨말인지 모르겠죠 ㅎㅎ CORS는 한 도메인의 웹 페이지가 다른 도메인의 리소스를 요청 및 상호 작용하는 방식을 제어하기 위해 웹 브라우저에 구현된 '보안' 기능입니다. 그니까 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 것입니다.</p>
<p data-ke-size="size16">이러한 CORS가 필요한 이유는 Same-Origin 정책(Same-Origin Policy, SOP)은 매우 중요하지만, 웹 페이지가 다른 도메인의 리소스에 엑세스하는데에는 또 다른 어떤 합법적이고 정당한 이유가 있기 때문입니다. 이떄 CORS는 Origin domain이 다른 도메인의 API를 호출하도록 허용하는 '안전한 방법'을 제공해주는 것이죠</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-10-19 오후 6.48.51.png" data-origin-width="777" data-origin-height="551">
    <span data-url="https://blog.kakaocdn.net/dn/TASHZ/btsyLN1KeFY/mOhs9JsAKUERZtjxTMCnf1/img.png" data-lightbox="lightbox" data-alt="출처 :&amp;nbsp;https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">
        <img src="https://blog.kakaocdn.net/dn/TASHZ/btsyLN1KeFY/mOhs9JsAKUERZtjxTMCnf1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-10-19 오후 6.48.51.png" data-origin-width="777" data-origin-height="551">
    </span>
    <figcaption>출처 :&nbsp;https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS</figcaption>
</figure>

<h3 data-ke-size="size23">Origin이란?</h3>
<p data-ke-size="size16">그럼 여기서 말하는 Origin이란 무엇일까요? Origin은 프로토콜(Http, Https), 도메인(soojin.com, localhost, localhost.soojin.com) 및 포트(80, 443, 8080)의 조합입니다.</p>

<p data-ke-size="size16">예시를 들어보겠습니다. 아래 예시는 전부 '서로 다른 오리진(Origin)'입니다.</p>
<ul data-ke-list-type="disc">
<li>http://localhost</li>
<li>https://localhost</li>
<li>http://localhost:8080</li>
</ul>
<p data-ke-size="size16">즉, 모두 localhost일지라도 서로 다른 프로토콜이나 포트를 사용하므로 서로 다른 Origin이 되는 것입니다.</p>
<p data-ke-size="size16">CORS는 이러한 Cross origin을 지원해주는 안전 장치라고 보시면 될 것 같습니다.</p>

<h3 data-ke-size="size23">Python FastAPI 예제</h3>
<p data-ke-size="size16">그럼, Python FastAPI에서 어떻게 이 CORS를 처리할 수 있을까요?</p>
<p data-ke-size="size16">간단한 예제로 살펴보겠습니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-06-18 오후 8.31.33.png" data-origin-width="1109" data-origin-height="357">
    <span data-url="https://blog.kakaocdn.net/dn/nUXdc/btsyPUZqSSA/GJfkhsurAZ11DUUTuirsIk/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/nUXdc/btsyPUZqSSA/GJfkhsurAZ11DUUTuirsIk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-06-18 오후 8.31.33.png" data-origin-width="1109" data-origin-height="357">
    </span>
    
</figure>
<p data-ke-size="size16">먼저, 위와 같은 데이터가 있다고 가정하겠습니다.</p>
<p data-ke-size="size16">해당 데이터는 도서에 대한 id가 있고 그것에 대한 제목, 저자 정보 등이 있는 데이터입니다.</p>

<p data-ke-size="size16">FastAPI에서 이 CORS를 처리하기 위한 방법은 CORSMiddleware를 활용하는 방법입니다.</p>
<p data-ke-size="size16">CORSMiddleware를 import한 후 app의 add_middleware에 추가한 뒤 origins을 설정해주면 됩니다.</p>

<pre id="code_1697710174754" data-ke-language="python" data-ke-type="codeblock"><code>from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost.lsjsj92.com",
    "https://localhost.lsjsj92.com",
    "http://localhost",
    "http://localhost:8080",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)</code></pre>
<p data-ke-size="size16">이와 같은 예제로 하면 됩니다.</p>
<p data-ke-size="size16">저는 아래에 사진을 기준으로 코드를 실행해보겠습니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-06-18 오후 8.37.24.png" data-origin-width="622" data-origin-height="518">
    <span data-url="https://blog.kakaocdn.net/dn/ckS9LO/btsyMOy99nW/0cUNDCHc19KcgYpwxlxQt0/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/ckS9LO/btsyMOy99nW/0cUNDCHc19KcgYpwxlxQt0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="534" height="445" data-filename="스크린샷 2023-06-18 오후 8.37.24.png" data-origin-width="622" data-origin-height="518">
    </span>
    
</figure>



<p data-ke-size="size16">제 코드의 흐름은 다음과 같습니다.</p>
<ol data-ke-list-type="decimal">
<li>FastAPI 서버가 실행되어 CORS 설정</li>
<li>Web에서(localhost:8000) item id 값을 호출</li>
<li>FastAPI 서버가 id값에 따라 value return</li>
<li>웹 페이지 출력</li>
</ol>
<p data-ke-size="size16">먼저, localhost:8000을 origin에서 주석처리 하여 셋팅을 하지 않았을 때 결과를 확인해보겠습니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-06-18 오후 8.37.30.png" data-origin-width="896" data-origin-height="514">
    <span data-url="https://blog.kakaocdn.net/dn/bEWukp/btsyMotVv8y/dPyGubYQQ56xkjLKgUtO71/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/bEWukp/btsyMotVv8y/dPyGubYQQ56xkjLKgUtO71/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-06-18 오후 8.37.30.png" data-origin-width="896" data-origin-height="514">
    </span>
    
</figure>
<p data-ke-size="size16">제가 원하는 12의 item_id값을 클릭하니까 위처럼 CORS 에러가 나오는 것을 확인할 수 있습니다.</p>
<p data-ke-size="size16">해당 화면은 크롬 개발자 -&gt; network에서 확인할 수 있습니다.</p>


<p data-ke-size="size16">그럼, FastAPI CORS Middleware 설정에서 origin에 8000번을 허락하면 어떻게 될까요?</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-06-18 오후 8.37.40.png" data-origin-width="1100" data-origin-height="670">
    <span data-url="https://blog.kakaocdn.net/dn/bVkjEI/btsyOYOJwOb/uvOZmwk9XT9DNA2tIE3Ku0/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/bVkjEI/btsyOYOJwOb/uvOZmwk9XT9DNA2tIE3Ku0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-06-18 오후 8.37.40.png" data-origin-width="1100" data-origin-height="670">
    </span>
    
</figure>


<p data-ke-size="size16">위 코드처럼 말이죠!</p>
<p data-ke-size="size16">이렇게 하고 웹에서 데이터를 요청해봅시다.</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-06-18 오후 8.37.59.png" data-origin-width="1020" data-origin-height="667">
    <span data-url="https://blog.kakaocdn.net/dn/ElNGj/btsyMd0ebxx/FNbjXHrFMCJ1DnPL7EemWK/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/ElNGj/btsyMd0ebxx/FNbjXHrFMCJ1DnPL7EemWK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-06-18 오후 8.37.59.png" data-origin-width="1020" data-origin-height="667">
    </span>
    
</figure>

<p data-ke-size="size16">CORS 에러가 뜨지 않고 결과가 잘 나오는 것을 확인할 수 있습니다&nbsp;</p>

<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style6">
<h2 data-ke-size="size26">마무리</h2>
<p data-ke-size="size16">이번 포스팅은 Python FastAPI에서 CORS를 처리하는 방법에 대해 정리해봤습니다. 더불어 CORS가 무엇인지도 알아보았습니다.</p>
<p data-ke-size="size16">도움이 되시길 바랍니다.&nbsp;</p>
<p data-ke-size="size16">감사합니다.</p>
            
            
                </div></div>

꿈 많은 사람의 이야기

포스팅 개요
본 포스팅은 Python FastAPI에서 CORS(Cross Origin Resource Sharing)을 처리하는 방법에 대해서 정리합니다.
추가로 CORS가 무엇인지 간략하게 설명하고 CORS가 왜 필요한지도 간단하게 정리하겠습니다.
참고로, CORS에 대한 설명은 FastAPI 공식 튜토리얼 페이지에 잘 나와있으니 참고하셔도 좋을 것 같습니다!
 
본 글에서 참고한 자료는 다음과 같습니다.
https://fastapi.tiangolo.com/tutorial/cors/
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
https://www.tutorialspoint.com/fastapi/fastapi_cors.htm
포스팅 본문 
포스팅 개요에서 말씀드린 것처럼 본 포스팅은 Python FastAPI에서 CORS를 처리하는 방법에 대해 정리합니다.
먼저, CORS란 무엇인지 정리하고 FastAPI에서 어떻게 활용할 수 있는지 예제 코드와 사진을 통해 살펴보겠습니다.
CORS란?
먼저, CORS란 무엇인지 살펴보겠습니다. CORS(Cross Origin Resource Sharing)란 한국어로 하면 "교차 출처 리소스 공유"로 해석될 수 있을 것 같습니다. 도대체 무슨말인지 모르겠죠 ㅎㅎ CORS는 한 도메인의 웹 페이지가 다른 도메인의 리소스를 요청 및 상호 작용하는 방식을 제어하기 위해 웹 브라우저에 구현된 '보안' 기능입니다. 그니까 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 것입니다.
이러한 CORS가 필요한 이유는 Same-Origin 정책(Same-Origin Policy, SOP)은 매우 중요하지만, 웹 페이지가 다른 도메인의 리소스에 엑세스하는데에는 또 다른 어떤 합법적이고 정당한 이유가 있기 때문입니다. 이떄 CORS는 Origin domain이 다른 도메인의 API를 호출하도록 허용하는 '안전한 방법'을 제공해주는 것이죠
 
 
Origin이란?
그럼 여기서 말하는 Origin이란 무엇일까요? Origin은 프로토콜(Http, Https), 도메인(soojin.com, localhost, localhost.soojin.com) 및 포트(80, 443, 8080)의 조합입니다.
 
예시를 들어보겠습니다. 아래 예시는 전부 '서로 다른 오리진(Origin)'입니다.
http://localhost
https://localhost
http://localhost:8080
즉, 모두 localhost일지라도 서로 다른 프로토콜이나 포트를 사용하므로 서로 다른 Origin이 되는 것입니다.
CORS는 이러한 Cross origin을 지원해주는 안전 장치라고 보시면 될 것 같습니다.
 
Python FastAPI 예제
그럼, Python FastAPI에서 어떻게 이 CORS를 처리할 수 있을까요?
간단한 예제로 살펴보겠습니다.
먼저, 위와 같은 데이터가 있다고 가정하겠습니다.
해당 데이터는 도서에 대한 id가 있고 그것에 대한 제목, 저자 정보 등이 있는 데이터입니다.
 
FastAPI에서 이 CORS를 처리하기 위한 방법은 CORSMiddleware를 활용하는 방법입니다.
CORSMiddleware를 import한 후 app의 add_middleware에 추가한 뒤 origins을 설정해주면 됩니다.
 
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
origins = [
    "http://localhost.lsjsj92.com",
    "https://localhost.lsjsj92.com",
    "http://localhost",
    "http://localhost:8080",
]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
이와 같은 예제로 하면 됩니다.
저는 아래에 사진을 기준으로 코드를 실행해보겠습니다.
 
 
제 코드의 흐름은 다음과 같습니다.
FastAPI 서버가 실행되어 CORS 설정
Web에서(localhost:8000) item id 값을 호출
FastAPI 서버가 id값에 따라 value return
웹 페이지 출력
먼저, localhost:8000을 origin에서 주석처리 하여 셋팅을 하지 않았을 때 결과를 확인해보겠습니다.
제가 원하는 12의 item_id값을 클릭하니까 위처럼 CORS 에러가 나오는 것을 확인할 수 있습니다.
해당 화면은 크롬 개발자 -> network에서 확인할 수 있습니다.
 
 
그럼, FastAPI CORS Middleware 설정에서 origin에 8000번을 허락하면 어떻게 될까요?
 
위 코드처럼 말이죠!
이렇게 하고 웹에서 데이터를 요청해봅시다.
 
 
CORS 에러가 뜨지 않고 결과가 잘 나오는 것을 확인할 수 있습니다 
 
마무리
이번 포스팅은 Python FastAPI에서 CORS를 처리하는 방법에 대해 정리해봤습니다. 더불어 CORS가 무엇인지도 알아보았습니다.
도움이 되시길 바랍니다. 
감사합니다.

Python FastAPI에서 CORS 적용하기 ( Feat. CORS란? )

댓글