개요

Flask - React를 사용하여 백오피스 개발 시 API(Flask)의 도메인과 Front(React)의 도메인을 다르게 설정할 경우 Front에서 API로 요청 시 CORS 이슈가 발생하여 데이터를 정상적으로 받아올 수 없습니다. 해당 경우 정상적으로 통신을 하기 위해서는 몇가지 설정이 필요합니다.

CORS

https://test-a.com 프론트엔트에서 XMLHttpRequet로 https://test-b.com의 도메인으로 요청할 경우 보안 이슈로 Http 요청을 제한합니다. 웹 어플리케이션은 자신의 출처(도메인?)와 동일한 출처의 리소스만 불러올 수 있으며, 다른 도메인의 리소스를 받기 위해서는 다른 도메인에서 CORS 헤더를 포함한 응답을 반환해야합니다.

• CORS 상세보기

설정

패키지 설치

Flask에서 CORS 설정을 해주기 위해서는 flask-cors 설치가 필요합니다

pip install flask-cors

• flask-cors document

사용

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

@app.route("/api/v1/users")
def list_users():
	return "users sample"

내용

1. flask app을 인스턴스를 생성하고 CORS 인스턴스 생성 시 flask app을 파라미터로 전달합니다.
2. resource 인자에 적용할 URL과 해당 URL에 허용할 origin 값을 설정합니다. 현재 코드 상에는 CORS(app, resources={r"/api/*": {"origins": "*"}}) https://test-b.com/api로 요청에 대하여 모든 orgins을 허용한다는 의미입니다.
   특정 도메인만 허용하고 싶은 경우에는 {"origins": "https://test-a.com"} 과 같이 설정이 가능합니다.

쿠키 전달

개요

도메인이 다른 사이트 API요청 시 쿠키를 전달하려고 하는경우 API를 받는쪽에서 쿠기가 정상적으로 전달되지 않습니다. 위와 같은 경우 withCredentials 설정이 필요합니다.

WithCredentials

XMLHttpRequest.withCredentials 속성은 쿠키, 권한 부여 헤더 또는 TLS 클라이언트 인증서와 같은 자격 증명을 사용하여 사이트 간 액세스 제어 요청을 만들어야하는지 여부를 나타내는 값입니다(boolean). withCredentials 설정은 동일 사이트 요청에 영향을주지 않습니다.

• withCredentials

사용

Front(axios)

axios.create({
	baseURL : https://test-b.com,
    withCredentials: true
})

backend(flask-cors)

CORS(app, resources={r"/api/*": {"origins": "*"}}, supports_credentials=True)

※ 틀린 정보는 댓글 남겨주시면 수정하겠습니다^^