Flask(Python)-React 간 CORS ERROR

1. 기본적인 해결

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# ... your code ...

if __name__ == "__main__" :
    app.run()

flask 에는 cors 문제를 해결할 수 있는 라이브러리가 있으니 이를 활용하면 된다.

 

 

2. 쿠키를 주고받을 때

하지만 쿠키를 주고 받을 때는 위와 같은 해결방식으로 해결이 안될 때도 있다.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=["https://localhost:3000", "outher_origin"], supports_credentials=True)

# CORS 관련 디버그 로그 
logging.getLogger('flask_cors').level = logging.DEBUG


# ... your code ...


@app.after_request
def after_request(response):
  response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
  response.headers.add('Access-Control-Allow-Methods', 'DELETE, GET, OPTIONS, POST, PUT')
  return response

if __name__ == "__main__" :
    app.run()

CORS 의 파라미터에 들어가는 supports_credentials 는

This allows cookies and credentials to be submitted across domains.

로 내 경우와 같이 쿠키까지 주고받을 경우 추가해야햔다. 기본값은 False이다.

 

CORS 관련 디버그 로그를 보면

 Settings CORS headers: MultiDict([('Access-Control-Allow-Origin', 'https://localhost:3000'), ('Access-Control-Allow-Credentials', 'true'), ('Access-Control-Allow-Headers', 'authorization'), ('Access-Control-Allow-Methods', 'DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT'), ('Vary', 'Origin')])

이기에 헤더에 값을 추가하였다.

 

 

 

참고 

https://flask-cors.corydolphin.com/en/latest/api.html

API Docs — Flask-Cors 3.0.10 documentation

# after_request 관련

https://flask.palletsprojects.com/en/2.2.x/api/?highlight=after_request#flask.Flask.after_request 

API — Flask Documentation (2.2.x)