항해99 6주차 WIL (CORS)

항해99 1주차 프로젝트때 기상청 공공 API 를 써서 날씨 정보를 프로젝트에 넣으려고 한적이 있었다. 그때 처음 마주한것이 바로 CORS 문제이다.
이번 항해 6주차 프로젝트 때에는 백엔드에서 서버 배포가 끝나고 데이터를 받아오려는 순간 이런 문제가 생겼다. 일단 먼저 프론트에서 해결하려고 여러가지를 시도해보았지만 모두 안되었다. 멘토님 말씀으로는 이건 서버가 브라우저에서 막아버려서 그런것이고 서버가 어디까지 하게해줄거야 라고 허락을 해줘야 하고, 프론트에서 하려면 강제로 열어야하는데 그것보다는 서버에서 하는게 맞다 라고 하셨다.

그래서 node.js Express라는 라이브러리를 사용해서 CORS 관련 설정을 해주어 서버를 모든 도메인에서 제한 없이 서버에 요청을 보내서 요청과 응답을 할수있도록 일단 설정하고 나중에 옵션을 주기로 하고 프로젝트를 진행했다.

CORS(Cross-Origin Resource Sharing) ?

"교차 출처 자원공유"
교차 출처=다른 출처 라고 생각하면 쉬운데 브라우저에서 다른 출처의 리소스를 공유하는 방법이다.

브라우저간의 데이터를 주고받는 과정에서, 도메인 이름이 서로 다른 사이트간에 api요청을 할 때, 공유를 설정하지 않았다면 CORS에러가 발생한다.

CORS 정책 위반으로 인한 문제가 발생했을 경우에 해결할 수 있는 방법

Webpack Dev Server로 리버스 프록싱하기
백엔드에서 Access-Control-Allow-Origin 헤더에 http://localhost:3000 같은 범용적인 출처를 넣어주는 경우는 드물기 때문에 프론트엔드가 로컬환경에서 CORS를 마주하는 경우가 더 많다고해도 과언이아니다.

프론트엔드 개발자는 대부분 웹팩과 webpack-dev-server를 사용하여 자신의 머신에 개발 환경을 구축하게 되는데, 이 라이브러리가 제공하는 프록시 기능을 사용하면 아주 편하게 CORS 정책을 우회할 수 있다.

module.exports ={
	devServer : {
    	proxy :{
        	'/api':{
            	target : 'https://api.picapipicca.com',
                changeOrigin :true,
                pathRewrite : {'^/api' : ''},
            },
        }
	}
}

이렇게 설정을 해놓으면 로컬환경에서 /api로 시작하는 URL로 보내는 요청에 대해 브라우저는 localhost:8000/api로 요청을 보낸 것으로 알고 있지만, 사실 뒤에서 웹팩이 https://api.evan.com으로 요청을 프록싱해주기 때문에 마치 CORS 정책을 지킨 것처럼 브라우저를 속이면서도 우리는 원하는 서버와 자유롭게 통신을 할 수 있다. 즉, 프록싱을 통해 CORS 정책을 우회할 수 있는 것이다.

Access-Control-Allow-Origin 세팅하기
가장 대표적인 해결 방법으로 서버에서 Access-Control-Allow-Origin 헤더에 알맞은 값을 세팅해주는 것이다. 이때 와일드 카드인 * 를 사용하여 헤더를 세팅하게되면 모든 출처에서 오는 요청을 막지않겠다는 의미이므로(활짝열린서버...) 보안적으로 심각한 문제가 발생할수있다.
가급적이면 Access-Control-Allow-Origin : http://picapipicca.com 처럼 출처를 명시해 주도록 하자. Spring,Express,Django와 같이 이름있는 백엔드 프레임워크의 경우에는 모두 CORS 관련 설정을 위한 세팅이나 미들웨어 라이브러리를 제공하고 있으니 세팅 자체가 어렵지는 않을 것이다.

첫 협업을 진행하며 느낀 점

뿌듯한점 : 리액트 심화주차 이후부터는 처음하는 협업인데 무사히 잘 해내고 또 내가 맡은 부분을 무리없이 잘 해낸것이 보람있었다.

아쉬운 점 : 일주일동안 정말 힘들었다 강의만 보고 파이어베이스를 쓰거나 혼자서 mongoDB랑 작업했지 실제로 백엔드와 api 명세서를 쓰고 데이터를 받아와서 파싱하는 작업조차도 어렵게느껴졌던것같다. 데이터는 그냥 받아오는거고 받아와서 이제 데이터를 어떻게 쓸거냐가 메인인것같았는데 받아오는 작업에 더뎌 크롤링이나 소셜 로그인등 해보고 싶었던 다른작업을 못한게 너무 아쉬웠다

어려웠던 점 : 데이터를 받아와서 리덕스에 넣어놨는데 데이터를 버튼에 따라 필터링해서 보여주는 부분은 구현해내지 못하여서 유투브에서 여러 방법을 따라해봤지만 잘안되었다. 백엔드에서 이미 데이터를 분류해서 저장해놓았다고 그래서 그걸 따로 api호출해서 받아오는식으로 필터작업을 하였다.하지만 정보가 계속 늘어나고 변경되는 상황이었다면 이렇게 서버에서 나눠서 보내주는것이 어려워질것같다.

좋았던 점 : 백엔드에 대해 그동안은 지식이 전무했다면 협업을 통해 백엔드 작업을 이해하고 알게되어 좋았다. 실제로 협업을 통해 결과물을 만들어낼수있으며 또 어떤 에러가 뜨는지 이런에러는 어떻게 해결해야 하는지 같이 고민하며 해결해나갈수있는 시간이었다. 같이 작업하시는 분들이 너무 좋은분들이셔서 정말 감사했다.

그리고 역시나 이번주도 느낀점은..어제가 제일 쉬운날이었다는것..! 오늘 걷지않으면 내일은 뛰어야 한다는점...!ㅠㅠ