[node.js] CORS 설정

* 개요

- 같은 포트, 같은 호스트에서 요청이 오는게 아니라면 기본적으로 서버는 공격으로 인식 한다. 그래서 로컬 개발 시 프론트와 API를 함께 띄워 놓고 개발하는 경우 CORS 설정을 통해 다른 포트에서 들어오는 요청에 대해 설정으로 통해 허락(?)이 필요하다.

 

* 설치 모듈

- API 서버에서 요청을 받으므로 API 서버에 설정을 한다.

npm install cors --save

npm i --save-dev @types/cors

 

* 소스 설정

const origin = "http://localhost:3000"

// 요청을 허용할 서버 또는 포트를 포함
app.use(
	cors({
		origin,
	})
);

 

* JWT 토큰 사용시 주의 사항

- 로그인 시에 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는지 확인 후 쿠키에 토큰을 발급 함. 그 후 다른 페이지에서의 인증도 이 토큰을 통해 인증이 이뤄진다.

그러나 백엔드와 프론트엔드의 주소가 다른경우 로그인이 성공하더라도 별다른 에러 없이 인증이 이뤄지지 않는다. 이는 도메인 주소가 다르면 쿠키가 전송이 되지 않기 때문임.

이를 해결하기 위해 프론트에서 axios 요청을 보낼 때 withCredentioals 설정이 필요하며, 백엔드에서 받아줄 때에는 cors 부분에 credentials : true 설정이 필요하다.

  즉 response header에 Access-Control-Allow-Credentials 를 설정해 준다.

 

// 백엔드 쪽 설정
app.use(cors({
	origin,
    credentials: true
}));

 

// 프론트 쪽 설정
  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();
    console.log("test");
    try {
      const res = await axios.post(
        "/auth/register",
        {
          email,
          password,
          username,
        },
        {
          withCredentials: true,
        }
      );
      console.log("res", res);
      // router.push("/login");
    } catch (error: any) {
      console.log("error", error);
      setErrors(error.response.data || {});
    }
  };