기본 콘텐츠로 건너뛰기

Flask내의 CORS

Flask내의 CORS

이런 코드가 있다.

from flask.ext.cors import CORS

CORS 가 무엇일까? ==> CORS ( Cross Origin Resource Sharing) 이다.

CORS (Cross-Origin Resource Sharing) : Request를 받는 서버와 Data를 제공하는 서버가 분리되어있는 경우, Domain이 다른 웹서비스가 Ajax로 데이터를 요청할 수 있는 경우가 생기는데 이것을 따로 컨트롤 해주어야 한다고 한다. ( http://zzagu.com/?p=56)

이것은 크로스 도메인 이슈를 해결하기 위한 방법이라고 한다.

자바에서는 xml 설정을 통해서 크로스 도메인 이슈를 해결한다.

http://ooz.co.kr/232 <= 이런 식으로

Flask에서는 CORS라는 모듈을 받은 다음에 그걸 연결하고 적용할 URI을 지정하는 방식으로 처리한다.

CORS(app, resources = r '/사이트 이름 또는 원하는 것/api/*' , headers = { 'Content-Type' , 'token' , 'If-Modified-Since' , 'Cache-Control' , 'Pragma' })

대충 이런 식으로..

자세한 사항은

https://media.readthedocs.org/pdf/flask-cors/2.1.0/flask-cors.pdf <=를 참조한다. 공식 문서인듯 영어임.

============================= 수정사항 =======================

미리 지정되어 있는 api 서버 주소를 같이 보내게끔 해서 해당 api 주소를 막지 않고 접속할수 있게끔 처리했다고 한다.

그래서 뷰단에서 일어나는 모든 처리들에 대해서 그 api관련 js 파일을 거치도록 만들고 그 거치는 과정에서

그것을 막기 위해서 Angular에서 따로 api관련된 js 파일을 만들어 주고 그것을 서버와 연결해주는 파일에 연결을 해준다.

지금 하고 있는 프로젝트에서는 첫 주소 글자가 서로 동일하다.

크로스 도메인 이슈는 서로 다른 도메인에서 생기는 문제이며 보통 맨처음 주소 글자가 하나라도 다름으로서 생기는 문제이다.

크로스 도메인 이슈에 대한 글들

웹 사이트 개발 시, 주요한 이슈중의 하나를 꼽자면 크로스 도메인(Cross Domain)이 있습니다.

최근 대부분의 웹 브라우저는 Javascript(JQuery)를 이용하여 AJAX 등을 통해서 다른 도메인의 서버의 URL 을 호출하여 데이터를 가져오는 경우, 보안 문제를 발생시킵니다.

만약 우리 웹 서비스에서만 사용하기 위해 다른 서브 도메인을 가진 API 함수를 제공하는 API 서버를 구축하였는데, 다른 웹 서비스에서 이 API 서버에 접근하여 마음대로 API를 호출하여 사용한다면 문제가 되겠죠.

그래서 Javascript 는 동일 출처 정책(Same Origin Policy) 라는 정책을 두어 다른 도메인의 서버에 요청하는 것을 보안 문제로 간주하고 이를 차단합니다. 즉, Javascript는 자신이 속한 동일한 도메인 내에서만 서버 요청을 허용하고, 처리해주겠다는 것인데요. 이것은 www.ozit.co.kr 도메인에서 호출된 AJAX는www.ozit.co.kr 도메인 내에 있는 URL만을 호출할 수 있다는 의미입니다. 다시말하면 www.ozit.co.kr 도메인에서 www.tistory.com 의 URL을 AJAX로 호출할 수 없다는 의미이죠.

이를 다른 말로는 샌드박스(Sandbox)라고도 합니다. 샌드박스는 보호된 영역 안에서만 프로그램을 동작시킬 수 있도록 하며, 외부에 의해 영향을 받지 않도록 하는 모델을 말하는데요. 이 말뜻은 단어에서 유추할 수 있듯이 어린아이들이 뛰어놀 때, 다치지 않고, 그 안에서만 놀 수 있도록 만든 '모래 놀이통'에서 왔습니다.

그런데, 하나의 도메인을 가진 웹 서버에서 모든 처리를 하기에는 효율성이나 성능 등 여러 문제로 각 기능별도 여러 서버를 두는 경우가 많은데요. (API 서버, WAS 서버, 파일(이미지) 서버 등등)

물리적으로 분리된 서버이고, 다른 용도로 구축된 서버이니, 당연히 각각 다른 도메인을 가진 서버들일 텐데, 서로간에 AJAX 통신을 할 수 없는 것일까요? 즉, 서로 다른 도메인간의 호출을 의미하는 크로스 도메인 문제를 해결할 수는 없는 것일까요?

(물리적으로 동일한 서버에서도 여러 도메인을 사용할 수 있는데, 이 때에도 동일하게 크로스 도메인 이슈는 발생합니다. 크로스 도메인은 물리적인 서버나 환경의 이슈가 아닌 도메인 이름 자체의 이슈입니다.)

참고로 아래에서 설명드릴 방식은 서버측에서 크로스 도메인을 허용하여 문제를 해결하는 방식인데, 서버의 수정 없이 클라이언트 단에서 이를 해결하는 방법 또한 있습니다. 하지만 100% 해결은 불가능합니다. jsonp, document.domain 값 설정, 크롬 브라우저의 특수 옵션 사용 등 몇몇 방법이 있으나, 범용적인 웹 서비스에서 사용이 어렵거나(사용자가 직접 세팅해야 한다거나), 그 기능이 제한적인 경우가 대부분입니다. 실제 서버에서 해결해주는 것이 표준화된 방법이고, 100% 해결 가능한 방법입니다.

아래는 크로스 도메인 문제가 발생하면 뜨는 오류 메시지입니다.

XMLHttpRequest cannot load http://www.ozit.co.kr.

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'http://abc.ozit.co.kr' is therefore not allowed access.

출처 : http://ooz.co.kr/232

from http://intellegibilisverum.tistory.com/61 by ccl(A) rewrite - 2020-03-06 13:20:24

댓글

이 블로그의 인기 게시물

2020년의 웹 기술 개발 스택

2020년의 웹 기술 개발 스택 웹 응용 프로그램을 개발할 때 고려해야 할 가장 중요한 것은 앱의 기반이 되는 기술 스택이다. 적절한 기술 스택을 통해 적은 예산으로 가장 큰 효과를 제공하는 것은 기업 입장에서는 특히 어려운 과제이며 올바른 기술 스택 사용은 프로젝트의 성공과 실패를 결정짓는 중요한 열쇠다. 물론 필자는 프로젝트를 직접 운영하고 있지도 않고, 사용할 기술 스택을 선택할 입장이 아니기 때문에 해당 사항이 없다. 하지만 2020년을 살아가는 Front-End 개발자로서 쌓아나가야 할 기술 스택의 방향성을 정하는 데 도움이 되고자 포스팅을 해본다. 2020년 웹 기술 개발 스택 최신 웹 기술 스택을 선택하기 이전에 웹 응용 프로그램 개발 프로세스 구성요소를 명확하게 이해해야 한다. 웹 개발에는 크게 클라이언트 쪽과 서버 쪽의 두 가지로 나뉜다. 클라이언트 측 프로그래밍 (Front-End) 웹 개발에는 사용자가 화면에서 보는 모든 것이 포함된다. 주요 프론트엔드 기술 스택 구성 요소는 다음과 같다. HTML (Hyper Markup Language) 및 CSS (Cascading Style Sheets) HTML은 브라우저에게 웹 페이지의 내용을 표시하는 방법을 알려준다. CSS는 그 내용을 스타일링 한다. (+) Bootstrap : HTML, CSS 관리에 유용한 프레임워크 JavaScript (JS) 웹 페이지를 대화식으로 만든다. 더 빠르고 쉬운 웹 개발을 위한 많은 JS 라이브러리와 프레임워크가 있다. - 라이브러리 : jQuery, React.js 및 Zepto.js - 프레임워크 : Angular, Vue, Backbone 및 Ember) 서버 측 프로그래밍 (Back-End) 서버 측은 어플리케이션(Back-End), 데이터베이스 및 서버 자체가 포함된다. 사용자에게 보이지 않지만 발전소가 집에 전기를 생성하는 것처럼 클라이언트 측에 전원을 공급하는 역할을 한다. 문제는 주로 웹 응용 프로그...

[ubuntu] FLASK_APP

[ubuntu] FLASK_APP Development/Debugging 🐞 FLASK_ENV=development FLASK_APP = app.py flask run zsh: command not found: FLASK_APP ✔️ FLASK_ENV=development FLASK_APP=app.py flask run 띄어쓰기를 해서 저런 오류를 출력할수도 있구나 😲 참고 : 108p에서 FLASK가 FKAS로 오타나있다. from http://hee-stories.tistory.com/18 by ccl(A) rewrite - 2020-03-24 17:20:11

외래어 정리

외래어 정리 [A] acacia 아카시아 academic 아카데믹 academy 아카데미 acanthus 아칸서스 accelerator 액셀러레이터 accent 악센트 acceptor 억셉터 access 액세스 accessory 액세서리 accordion 아코디언 ace 에이스 acetate 아세테이트 acetaldehyde 아세트알데히드 acetic acid 아세트(산) acetone 아세톤 acetyl 아세틸 acetylene 아세틸렌 Achilles tendon 아킬레스(건) acre 에이커 acrylic acid 아크릴(산) action 액션 active 액티브 acyl 아실 AD 에이디 adagio 아다지오 adapter 어댑터 ad + balloon 애드벌룬 address 어드레스 adenine 아데닌 adrenaline 아드레날린 advantage 어드밴티지 aerobic dance 에어로빅 댄스 aerofoil 에어로포일 aerosol 에어로졸 afghan 아프간 [편물] after + service 애프터서비스 agape 아가페 Ainu 아이누 air conditioner 에어컨(디셔너) airspray 에어스프레이 album 앨범 albumin 알부민 alcohol 알코올 aldehyde 알데히드 ALGOL 알골 algorism 알고리즘 alibi 알리바이 alkali 알칼리 alkaloid 알칼로이드 Allah 알라 allegory 알레고리 allegretto 알레그레토 allegro 알레그로 alleluia 알렐루야 Allergie 알레르기 alligator 앨리게이터 all-in-one 올인원 almond 아몬드 aloha 'oe 알로하 오에 Alpenhorn 알펜호른 alpha 알파 alphabet 알파벳 ...