WegoUp 프로젝트 개발 회고 2

강종연·2021년 6월 23일

API cors

개발을 하면서 많은 우여곡절이 있었다. 그 중에서도 이 프로젝트에서 가장 큰 부분을 차지 했던 API에 관한 테크니컬 이슈들을 오늘 얘기하고자 한다.

데이터가 안 나와!

분명히 API를 이용해서 axios.get으로 받아서 가져올려고 코드를 작성하고 실행을 했는데 데이터가 나오지 않는다.

무슨 문제가 있는 것이 분명하다.

내가 잘못 작성했나?

우선 내가 썼던 코드들을 다시 확인해보았다. 계속 보고 있어도 잘못 작성한 것은 없어보인다.

혹시나 링크를 잘못 작성했나? 그래서 확인 차 postman을 이용하여 받아 오도록 해보았다.

잘 나온다.

console.log로 불러와보자

우선 이 API로 받은 데이터가 들어왔는지 확인부터 해보았다.

console에는 내가 요청한 데이터가 뜨지도 않았다.

그렇게 콘솔을 확인하던 중 이상한 error 문구가 나를 오싹하게 만들었다.

CORS

분명히 내가 API를 불러오고자 적었던 링크가 그대로 적혀있고 오류가 적혀져있다.

찾아보니 CORS라는 정책 때문에 데이터를 못 가져온다는 이야기이다.

CORS란?

Cross-Origin Resource Sharing, 즉 CORS는 추가 HTTP헤더를 사용하여 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 알려주는 체제라고 한다.

결국 다른 도메인으로 내가 데이터를 요청하면 접근 권한을 받아야 가져올 수 있다는 소리다.

여러 곳을 뒤적뒤적 해보면서 알게 된 점은 API를 이용하여 프로젝트를 하시는 많은 분들이 이 CORS 정책 때문에 고생하셨는 것 같다.

보안상의 이유로 이런 정책이 시행되는 것인데 이것을 위반한 우리가 이 정책을 뜯어 고칠 수는 없을 것이다. 그러므로 다른 방법을 찾아보도록 하자.

그래서 해결방법은?

Access-Control-Allow-Origin
Proxy

삽질(Access-Control-Allow-Origin)

우선 여러 글들을 찾아봤는데 가장 간단한게 Access-Control-Allow-Origin 헤더를 설정하는 것이었다.(일단 내가 멍청하는 것만..)

Access-Control-Allow-Origin에 와일드 카드인 *만 추가해주면 모든 출처를 다 허용하도록 만든다.

이 문맥을 들은 나는 "뭐야 굉장히 간단하잖아? 왜 다들 고생하지.." 이래생각했지만 큰 오산이었다.

클라이언트 측에서 Access-Control-Allow-Origin: *을 추가해 요청을 해보았다.

감감 무소식이다.

다시한번 정독해서 읽어보니 데이터를 주는 서버에서 설정하는 것이었다. (이것도 모르고 1시간을 왜 안되지 하면서 계속 찾아보고 있었다는...)

Access-Control-Allow-Origin

사실 내가 위에서 삽질을 했지만 가장 무난한 방법이 아닐까 싶다.

서버입장에서는 원하는 도메인만 헤더에 추가를 하면 될 것이다.

와일드 카드인 *을 사용하면 모든 출처에서 다 허용을 하지만 이러면 CORS의 의미가 무산되니 보안적으로 심각한 이슈가 발생할지도 모른다.

그러니 웬만하면 추가할 도메인을 명시해주도록 하자.

Access-Control-Allow-Origin: https://velog.io

내가 썼던 해결 책(Proxy)

삽질을 한 후 나는 Proxy에 대한 방법들을 찾아보았다.

Proxy Server: 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다 (위키백과 중)

결국에는 클라이언트 측과 서버측의 중계 기능을 하는 것을 말한다.

우리가 CORS를 우회할 방법은 다음과 같다.

데이터를 요청한다.
proxy를 통해 기존 도메인의 요청이 아닌 우리가 설정한 도메인의 요청으로 바꾼다.
서버측은 허용된 도메인인 줄 알고 데이터를 전송해준다.

나는 이것을 위해 http-proxy-middleware 라이브러리를 이용해 프록시를 설정했다.

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
    app.use(
        createProxyMiddleware("/request/", {
            target: "https://api.qwer.pw/",
            changeOrigin: true,
        })
    );
};

target은 우리가 변경할 도메인 네임이고 /request/는 https://api.qwer.pw/request/helpful_text?apikey=guest대신에 /request/helpful_text?apikey=guest로 요청을 하면 알아서 target의 도메인으로 변경된다.

저장하고 실행해보니 데이터가 잘 불러와진다!

글을 마무리하며

이 프로젝트에서 가장 힘들었고 가장 어려웠던 부분이 API를 다루는 일인 것같다.

이렇게 한 API에서 CORS정책에 위반이 됐으면 다른 API를 가져와서 쓸 수도 있었지만 이미 많은 API를 찾아봤고 내가 필요한 한국 명언 API는 존재하지 않았었다.(존재하지 않아 처음 영감을 받았던 한강물 측정기 제작자님께 직접 메일을 넣어 API를 요청드렸고 흔쾌히 수락을 하셨다.)

그리고 다른 나라 주가관련 API들은 괜찮은데 유독 KOSPI의 주가 데이터만 말썽을 피워서 계속 바꾸다가 새로 API바꾸기에도 진이 빠진 것 같다.

프로젝트를 마무리한 뒤 배포하기위해 Netlify에 올렸는데 또 데이터가 안불러와졌다. (이번에는 뉴스데이터까지도..)

찾아보니 Proxy는 로컬에서만 유용한 방법이었다. 결국 서버에는 못올리고 로컬에서 GIF들을 찍어 Github README에 기록을 남긴다.

참 우여곡절이 많았지만 그래도 무사히 프로젝트를 끝마쳤고 CORS 정책 위반에 대한 경험이 없어 엄청 헤맸었는데 한번 겪어보니 다음부터는 수월하게 대처가 가능할 것 같다.