[TIL #18] React - Credential 이란?

앞선 포스트에서 Client와 Server의 도메인이 달라 CORS 에러가 발생한다는 것과 해결방법에 대해서 다뤘는데 이런 상황에서 CORS 에러 말고 다른 문제점도 존재하는데 바로 Cookie를 전달하지 못한다는 문제점이다.

⚡Cookie 란?
사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 의미한다.

Cookie가 전달되지 않게 되면 지금 요청을 보낸 사용자가 누구인지 Server에서 알수 있는 방법이 없다.
이게 무엇을 의미하냐면!! 만약 CORS 에러를 Cors 라이브러리를 설치하여 다음과 같이 해결했다고 가정하면 (Client:3000, Server:3065 일때)

app.use(cors({
    origin: 'http://localhost:3000'
}));

Client에서 Server로 올바른 Login 요청을 보내면 Server에서 확인하고 Login은 성공하게 된다.
하지만 이어서 Client에서 게시글 작성 요청을 Server로 보내면 Server에선 Cookie를 전달받지 못했으므로지금 게시글 작성 요청을 보낸 Client === 바로 전에 Login한 Client 라는 것을 알지 못하여 로그인하지 않은 Client의 게시글 작성 요청이라 판단하여 요청이 거절되게 된다!

해결 방법

(Cors 라이브러리 사용한다고 가정했을 때)

Backend

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.use(cors({
    origin: 'http://localhost:3000'
    credentials: true,	// 이 부분이 추가된다
}));

CORS에러를 해결할 때 작성했던 코드에 credentials: true 설정을 추가해주면 된다.

Frontend

function postAPI(data) {
    return axios.post('/post',data, {
      withCredentials: true,
    });
}

axios 요청을 보내는 부분에 위와 같이 withCredentials: true 설정을 추가해주면 된다.

주의 사항

app.use(cors({
    origin: '*'
    credentials: true,	
}));

만약 origin: '*'으로 특정 도메인이 아닌 모든 도메인을 허용한 상태에서 credentials : true를 하게 되면 보안에 문제가 있다는 에러가 발생하게 되므로 꼭 특정 도메인을 적어줘야 한다!
(Cookie엔 사용자의 정보가 들어가므로 보안에 더 신경써야 하기 때문에!!)