17. 샘플 프론트엔드 시스템과 CORS 문제 해결

  이전에 decorator 함수를 구현한 코드가 제대로 작동하는지, DB와의 연결은 유효한지, 인증은 엔드포인트가 작동하는지 여부를 확인하기 위해 이 책의 저자가 작성한 프론트엔드 시스템을 이용하기로 한다. 

 

  먼저 https://github.com/Yeri-Kim/python-tutorial-frontend    를 클론(clone)한다 여기서 클론은 서버에서 로컬로 repository를 복사하는 것을 말한다.

 

클론 후 해당 디렉토리로 이동하고 다음의 명령어를 입력한다.

python -m http.server

 

  실행 하면 8000 포트 상에서 실행 중 이라는 것을 알 수 있다. miniter API 는 5000포트 상에서 실행되는데 문제는 8000 포트와 5000 포트는 서로 상이한 환경이라서... 다른 말로는 출처가 다르기 때문에 브라우저에서 보안의 이유로 차단하게 된다.  이를 해결하기 위해서 다음의 명령어로 flask-cors 를 설치한다. 

 

pip install flask-cors

 

  그 후 create_app 함수안에 CORS 를 적용시켜 주고 새로운 엔드포인트를 추가해 준다. 

 

def create_app(test_config = None):
    app = Flask(__name__)
    
    CORS(app)
    
###########################
# 엔드포인트 추가
###########################

@app.route("/timeline", methods=['GET'])
@login_required
def user_timeline():
    user_id = g.user_id
    
    return jsonifiy({
        'user_id'   :  user_id
        'timeline'  :  get_timeline(user_id)
    })

 

이제 웹 브라우저로 아래의 주소를 입력하고 접속한다. 

 

https://localhost:8000/sign-up.html