frontendreact

React Axios에서 withCredentials를 사용하여 쿠키를 설정하는 방법

, , , , , ,

소개

웹 애플리케이션에서 인증 및 세션 관리는 매우 중요합니다. 이를 위해 쿠키를 사용하는 경우가 많습니다. 이번 포스팅에서는 React에서 Axios를 사용하여 서버로 요청을 보낼 때 쿠키를 설정하는 방법에 대해 알아보겠습니다. 특히 withCredentials 옵션이 왜 필요한지, 어떻게 사용하는지에 대해 자세히 설명하겠습니다.

Axios

Axios는 브라우저와 Node.js를 위한 Promise 기반 HTTP 클라이언트입니다. 먼저 Axios를 설치합니다.

1
npm install axios

Axios 기본 설정

1
2
3
4
5
6
7
8
import axios from "axios";

const instance = axios.create({
  baseURL: REACT_APP_BACKEND_BASE_URL,
  withCredentials: true,
});

export default instance;

위 설청에서 withCredentials: true 옵션은 Axios가 요청을 보낼 때 쿠키를 포함하도록 설정합니다. 이 옵션을 설정하지 않으면 서버로 요청을 보낼 때 쿠키가 포함되지 않습니다. 이는 CORS(Cross-Origin Resource Sharing) 정책 때문입니다. REACT_APP_BACKEND_BASE_URL은 서버의 도메인입니다.

서버 설정

React 앱에서만 쿠키를 설정하는 것으로는 쿠키를 서버로 전달할 수 없습니다. 서버에서도 쿠키를 설정해야 합니다. 서버에서 쿠키를 설정하는 방법은 서버 언어에 따라 다릅니다. 여기서는 Node.js와 Express를 사용하는 경우로 설명하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const express = require("express");
const cors = require("cors");
const app = express();

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

app.get("/user/profile", (req, res) => {
  res.json({
    name: "John Doe",
    email: "john.doe@example.com",
  });
});

app.listen(5000, () => {
  console.log("Server running on port 5000");
});

위 코드에서 cors 미들웨어의 credentials 옵션을 true로 설정하면 요청에 쿠키를 포함할 수 있습니다. origin 옵션은 요청을 허용할 도메인을 설정합니다. FRONTEND_BASE_URL은 프론트엔드 앱의 도메인입니다.

결론

React와 Axios를 사용하여 쿠키를 포함한 요청을 보내는 것은 비교적 간단합니다. 중요한 것은 withCredentials 옵션을 설정하고, 서버에서도 CORS를 적절히 설정하여 쿠키가 포함된 요청을 허용하는 것입니다. 이를 통해 보다 안전하고 효율적인 인증 및 세션 관리를 할 수 있습니다.

공유하기