<div id="readability-page-1" class="page"><article id="mainContent">
                <div>
                  <p><a href="/m/category/%EB%AD%94%EA%B0%80%EB%A5%BC%20%EB%B4%A4%EA%B1%B0%EB%82%98%20%ED%96%88%EB%8B%A4%EB%A9%B4%20%EC%98%AC%EB%A6%AC%EB%8A%94%20%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC"><span>뭔가를 봤거나 했다면 올리는 카테고리</span></a></p><h3>FastAPI와 안드로이드에서 CORS를 허용하는 방법</h3>
                </div>
                <p><cite>Berno</cite>
                  <span> 2022. 7. 31. 13:50</span>
                </p>
                
            
                <div>
                                <h2 id="CORS(Cross-Origin-Resource-Sharing)" data-renderer-start-pos="2">CORS(Cross Origin Resource Sharing)<span><span></span></span></h2>
<p data-renderer-start-pos="39" data-ke-size="size16">백엔드와 프론트엔드의 Origin이 다를때 나타나는 상황</p>

<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1528" data-origin-height="898">
    <span data-url="https://k.kakaocdn.net/dn/cgq4WA/btrIxA6X1eK/rhoBnzov7UIJgou9A7jHE1/img.png" data-lightbox="lightbox" data-alt="출처 :&amp;nbsp;https://beomy.github.io/tech/browser/cors/">
        <img src="https://k.kakaocdn.net/dn/cgq4WA/btrIxA6X1eK/rhoBnzov7UIJgou9A7jHE1/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="630" height="370" data-origin-width="1528" data-origin-height="898">
    </span>
    <figcaption>출처 :&nbsp;https://beomy.github.io/tech/browser/cors/</figcaption>
</figure>

<h2 id="FastAPI에서-CORS를-허용하는-방법" data-renderer-start-pos="104">FastAPI에서 CORS를 허용하는 방법</h2>
<p data-ke-size="size16">CORSMiddleware를 사용한다.</p>
<div>
<pre id="code_1659242874755" data-ke-language="python" data-ke-type="codeblock"><code>from fastapi.middleware.cors import CORSMiddleware
.
.
.
.
origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    #allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)</code></pre>
</div>
<ul data-indent-level="1" data-ke-list-type="disc">
<li>allow_origins에서 모두 허용하려면 와일드카드로 넣으면 된다.
<ul data-indent-level="2" data-ke-list-type="disc">
<li>그게 아니라면 특정 url만 리스트에 넣고 참조시키면 된다.</li>
</ul>
</li>
<li>method에는 POST,PUT,GET등이 들어간다. 허용하고자 하는 것들만 넣거나 와일드카드 처리한다.</li>
<li>특정 HTTP Header를 허용시키려면 직접 넣으면 되고 모두 허용시키려면 와일드카드 처리한다.</li>
<li>allow_credentials : 쿠키가 CORS 지원이 되는지 나타낸다. 기본값은 False이며 False인 경우 allow_origins에 와일드 카드를 넣을 수 없고 다 직접 지정해주어야한다.</li>
</ul>
<p data-ke-size="size16">Reference : <a href="https://lucky516.tistory.com/108" target="_blank" rel="noopener">https://lucky516.tistory.com/108</a></p>

<h2 id="Webview(Web)-mixedcontent" data-renderer-start-pos="837">안드로이드에서 CORS허용하기 : Webview(Web) mixedcontent<span><span></span></span></h2>
<p data-ke-size="size16">android 설정</p>
<pre id="code_1659243004995" data-ke-language="java" data-ke-type="codeblock"><code>webview.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW)</code></pre>
<p data-ke-size="size16">html 설정</p>
<pre id="code_1659243025153" data-ke-language="html" data-ke-type="codeblock"><code>&lt;meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"&gt;</code></pre>
            
            
                </div>
            

                            
            
              </article></div>

흔한 컴공출신 개발자

bernoyoun

CORS(Cross Origin Resource Sharing)
백엔드와 프론트엔드의 Origin이 다를때 나타나는 상황
 
 
FastAPI에서 CORS를 허용하는 방법
CORSMiddleware를 사용한다.
from fastapi.middleware.cors import CORSMiddleware
.
.
.
.
origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
]
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    #allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
allow_origins에서 모두 허용하려면 와일드카드로 넣으면 된다.
그게 아니라면 특정 url만 리스트에 넣고 참조시키면 된다.
method에는 POST,PUT,GET등이 들어간다. 허용하고자 하는 것들만 넣거나 와일드카드 처리한다.
특정 HTTP Header를 허용시키려면 직접 넣으면 되고 모두 허용시키려면 와일드카드 처리한다.
allow_credentials : 쿠키가 CORS 지원이 되는지 나타낸다. 기본값은 False이며 False인 경우 allow_origins에 와일드 카드를 넣을 수 없고 다 직접 지정해주어야한다.
Reference : https://lucky516.tistory.com/108
 
안드로이드에서 CORS허용하기 : Webview(Web) mixedcontent
android 설정
webview.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW)
html 설정
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

FastAPI와 안드로이드에서 CORS를 허용하는 방법

댓글