[Back-end] CORS (Cross Origin Resource Sharing)

백엔드 서버 - 파이썬 Flask

포트번호 8082에 라우팅 경로 test에서 데이터(success=True)를 response하도록 해뒀다.

옆의 200은 Not Found:404처럼 서버 상태를 나타내는 번호이며 200은 정상연결을 의미한다.

해당 8082포트의 /test페이지에는 전달한 데이터가 나타난다.

프론트엔드 서버 - html, Vue

html문서에 Vue를 CDN방식으로 받아두고

app에 리터럴 형식으로 method를 정의해 8082포트의 test경로의 사이트를 axios를 이용해 get방식으로 

데이터를 받아오도록 한다. 

해당 app의 이름으로 된 div태그에 버튼을 넣고 클릭 시

받아온 데이터를 response데이터로써 콘솔창에 찍도록 해준다.

Same Origin Policy

위처럼 백엔드 서버에서는 데이터를 제공하고

프론트엔드 서버에서는 백엔드 서버에서의 데이터를 요청해서 나타낼 수 있다.

Http의 request는 기본적으로 다른 도메인의 데이터를 요청할 수 있지만

위와 같은 경우에는 오류가 난다.

프론트 서버에서 생성했던 버튼을 클릭하면 8082포트의 데이터를 받아와야 하는데 오류가 난다.

CORS정책, Access-Control-Allow-Origin관련 정보가 Http response의 헤더에 없다면

Cross Domain을 허용하지 않는다는 것이다.

 

CORS 지원

위와 같은 오류가 생기는 이유는 프론트 서버의 Vue코드가 

script태그 안에 존재하기 때문이며

script태그 안에서 요청되는 내용은 프로토콜, 호스트, 포트가 모두 동일한 곳에서만 요청이 가능하다.

위에서는 8082포트와 5500포트로 달랐기 때문에 다른 도메인의 데이터를 요청하기 위해선

CORS가 필요하다.

(axios등으로 내부에서 요청기능을 지원함에 따라 CORS가 생겨남)

pip로 Flask에서 사용할 cors를 설치한다

app을 CORS에 넣어서 모든 요청과 응답에 CORS 헤더 정보를 지원하도록 한다.

이번엔 오류 없이 8082포트의 데이터인 success:true가

5500의 요청에 응답하여 전달된 것을 볼 수 있다.