[CORS 에러] nodejs에서 발생한 cors 에러 해결하기

에러 배경

백엔드를 개발해두고 프론트를 개발하던 도중에 CORS 에러가 발생했다. 정확한 원인은 모르지만 과거의 경험을 통해 해당 에러가 존재한다는 사실을 알고 있었고, 백엔드에서 해결할 수 있다고 알고 있었다.

에러 그 잡채

CORS란 Cross-Origin Resource Sharing의 약자로 HTTP header에 기반한 메커니즘으로 origin(도메인, 스키마 또는 포트)을 조사하고 로딩가능하도록 허락된 것인지 확인한다. 그렇기에 기본적으로 허용되지 않거나 동일한 origin이 아닌 경우 에러가 발생한다. 이는 보안상의 이유로 문제를 삼는 것이다.

 

CORS에 대한 자세한 내용은 MDN에서 확인할 수 있습니다.

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

해결 과정

해결. cors 라이브러리 활용

쿠키를 사용하는 경우와 사용하지 않는 경우가 다르기 때문에 주의할 필요가 있다. 또한 origin을 '*'로 전부 허용할 경우 나중에 배포한 경우에 문제가 생길 수 있기 때문에 특정 URL로 줄여주는 것이 중요하다.

 

자세한 코드는 Github에서 확인할 수 있습니다. FE Github, BE Github.

ProgrammersSchool/FE-BOOKSTORE/bookstore/src/api/http.ts at main · nulzi/ProgrammersSchool

ProgrammersSchool/PROJECT-BOOKSHOP/app.js at main · nulzi/ProgrammersSchool

 

시도1. res의 헤더에 허용 origin 직접 설정하기

res.setHeader('Access-Control-Allow-origin', '*');
res.setHeader('Access-Control-Allow-Credentials', 'true');

직접 헤더에 origin을 허용해 주는 방법이다. 하지만 기본적인 설정이 무엇인가 다른 건가 에러가 해결되지 않았다.

정리

해당 에러를 해결하는 과정에서 중요한 부분은 쿠키를 사용하는 것과 사용하지 않는 부분이 다르다는 점이고, 제공되는 라이브러리를 사용할 경우 시도해 주고 기본적으로 설정해 주는 범위가 더 넓기 때문에 직접 시도했을 때 에러가 해결되지 않는다면 이를 활용하고 있는 라이브러리를 사용해 보는 것 또한 방법이 될 수 있겠다는 생각이 들었다.

 

참고

cors 모듈 - CORS 간편 설정하기, inpa, 2024.07.18