기본 콘텐츠로 건너뛰기

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

댓글

이 블로그의 인기 게시물

Coupang CS Systems 채용 정보: 쿠팡 운용 관리 시스템을 구축 하고...

Coupang CS Systems 채용 정보: 쿠팡 운용 관리 시스템을 구축 하고... Global Operation Technology는 상품을 고객에게 지연 없이 전달 될 수 있도록 하는 조직입니다. 1997년, 초창기 아마존에 입사한다고 상상해보세요. 그 당시 누구도 e-commerce 산업이, 아마존이라는 회사가 지금처럼 성장하리라고는 생각하지 못했을 것입니다. 하지만, 그 당시 아마존을 선택한 사람들은 e-commerce 산업을 개척했고, 아마존을 세계적인 회사로 성장시켰습니다. 2016년 '아시아의 아마존'으로 성장하고 있는 쿠팡, 당신에게 매력적인 선택이 아닐까요? Global Operation Technology: eCommerce에서 주문을 한 뒤 벌어지는 상황에 대해서 호기심을 가져보신 적이 있나요? Global Operation Technology는 상품을 고객에게 지연 없이 전달 될 수 있도록 하는 조직입니다. 매일 최첨단 소프트웨어 기술을 이용해 고객의 주문을 받고 상품을 어느 창고에서 출고 시킬지, 포장을 하나의 박스 또는 여러 개로 나눌 것인지, 어떤 배송 루트를 선택하고 어떻게 고객에게 배송 상태를 보여줄지 결정하는 시스템과 서비스를 개발 합니다. What Global Operations Technology does: CS and C-Returns System 적극적 고객서비스를 바탕으로 고객의 목소리를 통해 끊임없이 고객 에게 서비스를 제공하고 Andon 메커니즘을 통해 고객의 목소리를 회사 전체와 공유합니다. 그리고 고객 문제 해결과 구매 이후 벌어질 수 있는 고객 문제를 사전에 예방하기 위한 시스템 개발을 통해 미래의 상황을 예측 합니다. Tranportation System TSP (Traveling Salesman Problem) 와 같은 CS 최적화 관리 문제를 다룹니다.배송 물품의 실시간 추적, 3P 하드웨어와 소프트웨어를 통합, 각 배송 루트에 할당되는 물량 예측하고 T...

스프링 프레임워크(Spring Framework)란?

스프링 프레임워크(Spring Framework)란? "코드로 배우느 스프링 웹 프로젝트"책을 개인 공부 후 자료를 남기기 위한 목적이기에 내용 상에 오류가 있을 수 있습니다. '스프링 프레임워크'가 무엇인지 말 할 수 있고, 해당 프레임워크의 특징 및 장단점을 설명할 수 잇는 것을 목표로합니다. 1. 프레임워크란? 2. 스프링 프레임워크 "뼈대나 근간을 이루는 코드들의 묶음" Spring(Java의 웹 프레임워크), Django(Python의 웹 프레임워크), Flask(Python의 마이크로 웹 프레임워크), Ruby on rails(Ruby의 웹 프레임워크), .NET Framework, Node.js(Express.js 프레임워크) 등등. 프레임워 워크 종류 : 3. 개발 시간을 단축할 수 있다. 2. 일정한 품질이 보장된 결과물을 얻을 수 있다. 1. 실력이 부족한 개발자라 허다러도 반쯤 완성한 상태에서 필요한 부분을 조립하는 형태의 개발이 가능하다. 프레임워크를 사용하면 크게 다음 3가지의 장점 이 있습니다. 프레임워크 이용 한다는 의미 : 프로그램의 기본 흐름이나 구조를 정하고, 모든 팀원이 이 구조에 자신의 코드를 추가하는 방식으로 개발 한다. => 이러한 상황을 극복하기 위한 코드의 결과물이 '프레임워크' 입니다. 개발자는 각 개개인의 능력차이가 크고, 따라서 개발자 구성에 따라서 프로젝트의 결과 차이가 큽니다. 2. 스프링 프레임워크(Spring Framework) 자바 플랫폼을 위한 오픈 소스 애플리케이션 스프링의 다른 프레임워크와 가장 큰 차이점은 다른 프레임워크들의 포용 입니다. 이는 다시말해 기본 뼈대를 흔들지 않고, 여러 종류의 프레임워크를 혼용해서 사용할 수 있다는 점입니다. 대한민국 공공기관의 웹 서비스 개발 시 사용을 권장하고 있는 전자정부 표준프레임워크 이다. 여러 프레임워크들 중 자바(JAV...

Flask 18. jQuery와 ajax

Flask 18. jQuery와 ajax 현재 우리는 api를 만들고 있다. api를 사용하기 위해서는 ajax를 사용해야한다. 그리고 ajax를 편하게 쓸 수 있도록 도와주는 것이 jquery라이브러리이다. ajax는 비동기로 서버에 요청할 수 있다. 브라우저에 XMLHttpRequest객체가 있어서 이것을 사용해서 서버에 데이터를 요청할 수 있다. 기존에는 웹에 접근할 때 주소에다가 서버의 주소를 씀으로써 데이터(페이지)를 요청할 수 있고, form을 만드는 방법이 있다. 이러한 방법들은 페이지 이동이 일어나서 서버에서 무조건 응답으로 웹페이지를 만들어서 응답해야하는 단점이 있었다 그러나 api를 사용하면 리소스 중심으로 데이터의 이동만 일어난다. 클라이언트는 데이터만 받기 때문에 데이터로 웹을 만들어야한다. 화면은 이미 만들어져있는 상태에서 비동기로 화면을 전환하지 않고, 서버에 데이터 요청을 한 후 그 데이터를 기반으로 웹에 그 데이터를 반영하는 것이다. 이것들은 백그라운드에서 일어난다. 이것을 위해서는 자바스크립트를 이용해야하고 jquery를 이용할 것이다. jquery는 여러 셀렉터를 사용할 수 있어서 편하다. 자바스크립트 작업을 좀더 생산성 좋게 작업할 수 있도록 해준다. 가장 큰 특징은 ajax요청을 아주 쉽게 할 수 있다. 정리 비동기 요청을 위해서 ajax를 사용할 것이고, 그러나 순수자바스크립트는 어렵기 때문에 jquery를 사용할 것이다. 공유하기 글 요소 저작자표시 from http://ohdowon064.tistory.com/134 by ccl(A) rewrite - 2020-03-24 10:54:10