Node.js 및 모든 프런트엔드 JavaScript 프레임워크를 사용한 단순 쿠키

Fact: Elite programmers do simple things. It's the idiots who complicate things just to look smart.

왜 또 하나?

우리는 모두 Node.js 및 React.js(또는 다른 프런트엔드 프레임워크)로 HTTP 쿠키를 설정하기 위해 블로그를 방문했으며 솔직히 말해서 프로젝트를 설정하는 데 필요한 모든 정보가 포함된 기사를 찾기가 어렵습니다.

거기에는 구성에서 많은 if와 but을 찾을 수 있으므로 작동시키는 데 필요한 사항을 알려 드리겠습니다. 그게 다입니다. 나는 이것을 짧고 요점으로 유지할 것입니다.

의제

설정이 어떻게 보이는지부터 시작하겠습니다.

개발 및 프로덕션 환경을 위한 별도의 구성입니다. 그것은 모든 블로그에서 빠진 것입니다.

백엔드가 브라우저에서 쿠키를 설정할 수 있도록 프런트엔드axios 라이브러리를 구성합니다.

올바른 구성으로 쿠키를 설정하도록 백엔드 API를 구성합니다. 당신이 필요로 하고 신경쓰는 것들만.

가정

별도의 도메인에서 프런트엔드와 백엔드 API를 호스팅할 것이라고 가정합니다. 명확히 하기 위해 api.example.com 및 example.com도 두 개의 별도 도메인으로 계산됩니다.

프런트엔드 구성

프런트엔드에서는 axios과 같은 타사 라이브러리를 사용하여 서버에 요청한다고 가정합니다. 사용자 정의된 모든 기본 구성을 사용하여 Axios의 새 인스턴스를 생성하고 프로젝트의 다른 모든 곳에서 이 인스턴스를 사용하는 것이 좋습니다.

사용자 정의 기본 구성으로 Axios 인스턴스 생성

.create 함수를 사용하면 백엔드에 만들려는 여러 유형의 요청에 대해 서로 다른 구성을 설정할 수 있습니다. 예를 들어 인증된 요청을 위한 Axios 인스턴스와 인증되지 않은 요청을 위한 다른 인스턴스가 있을 수 있습니다.

// utils/axios.js

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "http://api.example.com/api", // optional but recommended
  withCredentials: true, // to allow your API to set cookies on the browser
});

export default axiosInstance;

더 좋은 방법일 뿐입니다 🤷

프런트 엔드 구성이 완료되었습니다. 이제 이 새로 생성된 Axios 인스턴스를 사용하여 평소처럼 백엔드에 요청할 수 있습니다.

예를 들어:

// utils/api.js

import axios from "utils/axios";

function fetchProducts() {
  return axios.get("/products/all/");
}

이제는 기본 URL을 매번 설정할 필요가 없습니다. 천만에요 :)

백엔드 구성

프로젝트에 단일 라이브러리를 설치하기만 하면 됩니다 - CORS .

환경 변수

프런트엔드 URL을 저장할 환경 변수를 만듭니다. 개발 환경에서 프로젝트를 실행 중인 경우 http://localhost:8000 로 설정하거나 프로덕션 환경에서 실행 중인 경우 https://example.com 로 설정할 수 있습니다.

# .env

FRONTEND_URL=http://localhost:8000

dotenv과 같은 타사 라이브러리를 사용하여 .env 파일에서 환경 변수를 로드할 수 있습니다.

익스프레스 앱 설정

프런트엔드 브라우저에서 쿠키를 설정할 수 있도록 CORS 및 기본 응답 헤더를 구성합니다.

// index.js

import express from "express";
import cors from "cors";

async function main() {
  const app = express();
  // ...your Express app configurations

  // allow the frontend to make requests to your API
  app.use(cors({
    origin: process.env.FRONTEND_URL,
    credentials: true
  }));

  // set headers for you to be able to set cookies on the browser
  app.use((_, res, next) => {
    res.header("Access-Control-Allow-Origin", process.env.FRONTEND_URL);
    res.header("Access-Control-Allow-Headers", "*");
    res.header("Access-Control-Allow-Credentials", "true");
    next();
  });

  // ...your rest of the configurations

  app.listen(process.env.PORT, () => {
    console.log("App is up and running");
  });
}

main() // again, just a better way of doing things

그리고 이것이 백엔드 프로젝트에서 쿠키를 설정하는 데 필요한 전부입니다. 이제 엔드포인트 응답에서 쿠키 설정을 시작할 수 있습니다.

작업 구성으로 쿠키 설정

자동으로 설정된 환경 변수NODE_ENV를 사용하여 주어진 형식을 사용하여 개발 및 프로덕션 환경 모두에서 쿠키를 설정할 수 있습니다.

// routes/auth.js

const isInDevelopment = process.env.NODE_ENV === "development";
const cookieConfigs = {
  httpOnly: true,
  sameSite: isInDevelopment ? false : "none",
  secure: isInDevelopment ? false : true,
  maxAge: 365 * 24 * 60 * 60 * 1000, // one year
};

router.post("/signIn/", (req, res) => {
  // ...your own login
  res.cookie("cookie-name", "cookie-value", cookieConfigs);
  res.status(204).send(); // read about HTTP status 204
});

결론

그게 다야! 더 이상 Node.js로 실행 가능한 쿠키 구성을 찾기 위해 하나의 Stackoverflow 응답에서 다른 응답으로 헤매지 않아도 됩니다.

이 기사가 도움이 되었다면 좋아요를 누르고, 내가 놓친 것이 있거나 다른 기사에서 다루었으면 하는 내용이 있으면 댓글을 남겨주세요.

종료합니다! 👋