네이버 API를 활용하여 소셜 로그인을 구현하며
CORS error를 마주하게 되었는데,
그 에러를 해결하기 위해 이것저것 찾아보다 알게된 내용들을 정리해보려고 한다.
(이해한대로 정리한거라 정확하지 않은 내용이 포함되어 있을 수 있음을 미리 알린다)
WHAT IS SOP?
나는 그저 CORS error의 해결방법을 알고 싶었을 뿐인데,, 어딘가에서 SOP라는 개념이 툭 튀어나왔다..
SOP (Same-Origin-Policy / 동일 출처 정책)는 웹브라우저들이 공유하는 중요한 보안정책으로, 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 것을 말한다. 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 보안을 강화한다. SOP에서는 두 URL의 프로토콜, 포트, 호스트가 모두 같아야 동일한 출처라고 정의한다.
어렵게 설명되어 있긴 한데, 내 식대로 쉽게 생각하면 보안을 위해 프로토콜(http, https), 포트번호, 호스트가 다른 출처와 커뮤니케이션 하는 걸 막는 공통된 약속이 SOP라고 생각하면 될 듯 싶다.
WHAT IS CORS?
그렇다면 CORS error에서 CORS는 뭘까?
MDN에 따르면 CORS (Cross-Origin Resource Sharing / 교차 출처 리소스 공유)란 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
CORS의 개념을 알고보니 왜 SOP 개념이 먼저 나왔는지 이해가 되었다. 결국 웹브라우저는 기본적으로 다른 출처에의 접근을 막는데, 그걸 해결할 수 있는 방식이 CORS라는 것!
How to solve CORS error?
Fetch API는 SOP(동일 출처 정책)을 따른다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다는 것. 즉, CORS error는 다른 출처의 리소스를 불러왔으나 올바른 CORS 헤더를 포함한 응답을 반환하지 못했을 경우 발생하는 오류라고 볼 수 있다.
내가 마주한 문제는 네이버라는 외부 출처에 리소스를 요청하였으나, 네이버 서버에서 header에 올바른 CORS 헤더를 포함해주지 않았기 때문에 발생한 것(으로 판단). 동일한 프로세스이지만 카카오 API를 활용할 때는 문제가 생기지 않는 이유는, 카카오 서버에서 CORS 헤더를 통해 올바른 응답을 반환했기 때문이라고 추측된다.
이를 해결하기 위해 내가 선택한 방법은 http-proxy-middleware 라이브러리를 활용, 출처 우회를 통해 동일한 출처에서 요청이 주고받아지는 것처럼 속이는 방법이다.
이 방법을 사용하기 위해서는, 라이브러리를 install 후 setupProxy.js라는 별도의 파일을 만들고 아래의 코드를 삽입한다.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
createProxyMiddleware('/naver', {
target: 'https://nid.naver.com',
pathRewrite: {
'^/naver': '',
},
changeOrigin: true,
})
);
};
그 후 Fetch API 부분에 URI를 /naver/oauth2.0/로 처리하면 문제 해결!!
솔직히 CORS의 동작원리에 대해서 열심히 공부해봤지만, 아직 완벽하게 이해하지는 못했다. 또한 내가 선택한 방법 이외에도 에러를 해결하기 위한 방법이 정말 많고, 각각의 방식에 대한 의견도 분분한 것을 볼 수 있었다. 어떤 방식이 정말 좋은건지 알 수 없어 일단 스스로 이해하고 적용할 수 있는 방식을 선택하였는데, 이 내용을 진심으로 이해할 수 있는 순간이 오기를.....🙏🏻
