Node.js express CORS 허용하는 방법

보통 SPA(Single Page Application)에서는 백엔드로 API서버를 두고

해당 서버에서 정보를 받아온 후 프론트에서 랜더링 해주는 방식으로 구현한다.

나도 이번에 CMS비슷한 사이트를 구축하고 있다.

백엔드는 Node.js에 Express엔진을 올려서 사용하고 있으며 프론트는 React.js를 사용중이다.

프론트단에서 API서버로 fetch()를 하고 있었는데 아래와 같은 에러가 발생했다.

Failed to load http://localhost:4000/api/login: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

CORS란 무엇인지 이전 포스팅에서도 설명했으니 간단하게만 설명하겠다.

한마디로 같은 도메인이 아닐 때 접근이 불가능하단 얘기다. 보안 상의 이유로 설계된 Security Policy이다.

따라서 백엔드측에서 CORS관련 설정을 풀어줘야 하는데,

직접 Access-Control-Allow-Origin를 *로, Access-Control-Allow-Headers를 X-Requested-With로 설정해주는 방법도 존재하지만

나는 라이브러리를 설치하여 진행했다.

먼저 아래의 명령어로 cors를 설치한다.

yarn add cors

위와 같이 나온다면 성공적으로 설치가 완료된 것이다.

이제 index.js를 열고 미들웨어로 설정해준다.

import cors from 'cors';

app.use(cors());

그리고 다시 프론트에서 요청을 해보면 정상적으로 동작하는것을 확인할 수 있다.