나만의 시간

매번 프로젝트때마다 하는 작업이지만 Flask에서는 처음 처리해보는 거라 기록으로 남겨봅니다.

현상

앞단은 로컬에서 개발 중이었고, 뒷단은 개발서버에 있는 Flask 사용 중이었는데

앞단에서 Flask에 정의된 request를 던지면 아래와 같은 에러가 발생하는 것을 확인하였습니다.

Access to XMLHttpRequest at 'http://192.168.****' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

원인

에러 문구에서 보이는 것처럼 CORS (Cross-Origin Resource Sharing) 정책에 의해 block됨

CORS (Cross-Origin Resource Sharing)
타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것
출처) https://developer.mozilla.org/ko/docs/Glossary/CORS

동일 출처 정책(same-origin policy)
어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식
여기서의 동일한 출처는 두 URL의 프로토콜, 포트(명시한 경우), 호스트가 모두 같아야 함
출처) https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

즉, 동일한 출처가 아니어서 위와 같은 에러 발생

처리방법

Cross-Origin을 허용해주어 다른 도메인에서 호출하는 것을 가능하게 함 

# 출처) https://flask-cors.readthedocs.io/en/latest/
# flask-cors 설치는 pip install flask-cors
from flask_cors import CORS, cross_origin

...
app = Flask(__name__)
#CORS(app) 전체에 적용해주려면 사용 
...

@app.route('/test', methods=['POST'])
@cross_origin() # 해당 request에만 적용해줄 때 사용
def test():

참고

1. 동일 출처 정책(same-origin policy)은 브라우저의 보안 정책이므로 브라우저마다 조금씩 다름

IE의 경우 포트가 달라도 same-origin으로 판단

2. 브라우저의 정책이므로 브라우저를 사용하지 않는 경우에는 상관없음

curl로 호출 시에는 무관

3. 헤더값 확인 

- request header
Host: 192.168.***.***:5000
Origin: http://localhost:3000
=> 요청을 보낸 host(Origin)와 요청을 처리할 host(Host)가 다르다 (Cross-Origin)

- response header
Access-Control-Allow-Origin: http://localhost:3000
...
Vary: Origin
=> Cross-Origin이어도 http://localhost:3000은 허용해주라고 서버에서 정보를 줌

4. Origin헤더는 항상 생길까?

Cross-Origin일 경우에만 request 헤더에 Origin헤더가 자동으로 생성되는 것을 확인함 

출처) https://kamang-it.tistory.com/entry/Web동일-출처-정책-CORS-도대체-뭘까