Cors 에러 해결하기 (feat. 서버에서 해결하는 방법)

 

실습을 진행하면서 next.js 로 클라이언트를 구성하고 클라이언트에서 express에서 구현해놓은 API를 요청하도록 해주는 작업을 진행하였다. 그리고 마주한 CORS 에러...

 

일단 이걸 해결하기 위해서는 CORS에러가 뭔지 알아야한다

 

CORS 에러란?

다른 출처(도메인/포트)의 리소스를 요청할 때 브라우저가 막는 보안 정책

 

지금은 둘다 로컬인데 이게 왜 발생하느냐 물어본다면 포트번호만 달라도 출처가 다르다고 생각하기 때문이다.

 

이 에러를 방지하기 위해서는 서버에서 CORS 설정으로 요청을 허락해주도록 수정해주어야한다.

 

 

일단 express 프로젝트에서 cors 패키지를 설치해준다

 

npm install cors

 

그리고 express 서버를 구축한 프로젝트 내의 app.js 파일에서 아래와 같은 코드를 넣어주면 된다.

const express = require("express");
const cors = require("cors");

const app = express();

// CORS 허용
app.use(cors({
  origin: "http://localhost:3000", // Next.js 개발 서버 주소
  credentials: true, // 세션/쿠키 필요 없으면 false
}));

app.use(express.json());

 

 

여기에 이미 코드가 있는 부분이 있다면 cors 관련 부분만 추가해주면 된다.

 

이렇게 해준 후에 저장해주고 

 

npm start

 

를 해주면 cors 에러없이 요청이 잘 불러와지는 것을 알 수 있다.