[TIL] 11월 5일: CORS

1, 2차로 나누어 프로젝트를 진행했었는데 이 결과물은 현재 Monolithic 아키텍쳐, 즉 프론트엔드와 백엔드, 데이터베이스가 한 군데에 위치한 구조로 이뤄져있다. 처음 개발을 시작했을 때는 편하고 좋았지만 이러한 프로젝트의 규모가 커질수록 단점이 부각된다고 한다. 물론 나는 토이 프로젝트로 만들었기 때문에 MSA로 변경을 하지 않아도 되지만 요즘은 MSA(MicroService Architecture)로 개발을 많이 진행한다고 하고, 이를 적용해봄으로써 공부도 되기 때문에 변경하고자 한다.

우선 우리의 프로젝트의 규모가 크지도 않고 토이 프로젝트이기 때문에 프론트엔드, 백엔드 + 데이터베이스. 이렇게 두 가지로 나눌 것이다. 프론트엔드 파일들은 S3로 정적 웹호스팅 하고 cloudfront를 사용해 CDN의 장점을 챙길 것이다. 백엔드 관련 파일들과 데이터베이스는 EC2 인스턴스에 넣을 것이다.
그래서 목표는 프론트엔드와 백엔드를 분리해 정상 작동하게 하는 것 !

CDN의 장점

• 캐싱
  CDN을 통해 전 세계의 각 지역에 효율적인 속도로 컨텐츠를 제공할 수 있다.
  
  
• 트래픽 분산
  CDN을 이용하지 않는다면 모든 트래픽이 오리진 서버(CDN에 배치되지 않은 원본 서버)에 몰리게 되므로 CDN을 사용하면 트래픽 분산이라는 장점을 누릴 수 있다.

프론트엔드와 백엔드를 분리하면 서로의 출처(도메인, 프로토콜, 포트)가 달라진다. 그렇기 때문에 코드를 작성할 때

 $.ajax({
        type: "POST",
        url: "http://{서버쪽 출처(도메인, 프로토콜, 포트)}/sign-up/save",
        data: {
            username_give: username,
            password_give: password
        },
        success: function (response) {
            alert("회원가입을 축하드립니다!")
            window.location.href = "../templates/login.html";
        }
    });

ajax의 url 부분에 서버쪽 출처(도메인, 프로토콜, 포트)를 추가해야 한다.

하지만 이렇게 코드를 작성하고 실행을 하면 CORS 에러가 발생한다.

CORS (교차 출처 리소스 공유)

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

교차 출처 요청의 예시: https: //domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https: //domain-b.com/data.json을 요청하는 경우

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. 예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따른다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

Flask에서는 CORS를 간편하게 해결할 수 있다.

pip install flask_cors

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

@app.route("/example/hello")
def example():
  return "hello"

이렇게 코드를 추가 하면 CORS 에러를 아주 간편하게 잡을 수 있다.

참고
WEBISFREE.com. “Python Flask에서 Cors Cross Origin 사용하기.” WEBISFREE, https://webisfree.com/2020-01-01/python-flask%EC%97%90%EC%84%9C-cors-cross-origin-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0.

“교차 출처 리소스 공유 (CORS) - Http: MDN.” HTTP | MDN, https://developer.mozilla.org/ko/docs/Web/HTTP/CORS.