[인프런 강의][Cookie] 사용자 인증이 필요한 api를 호출할 때, client와 server에 해줘야 하는 작업

개요

강의에서 커뮤니티(그룹)을 생성하는 기능을 구현하고 있다. 사용자 인증을 거쳐야 서버에서 클라이언트에서의 요청작업을 수행해줘야 한다.

클라이언트에서 서버로 요청할 때, Request Header에 Cookie를 넣어서 보내야 하는데, 서버랑 도메인이 다르다보니, cookie가 전송되지 않았다. 

왼쪽에 네트워크 탭보면, Request Headers엔 Cookie가 없다.

뿐만 아니라, 클라이언트에서 서버로 쿠키를 넘겨도, 서버에서는 받지 못하고 있었다.

express 서버 에러

 

이제 이 문제를 강의를 들으면서 해결한 방법을 소개한다.

 

 

 

Client에서 cookie를 헤더에 넣어서 쏘는 방법은. 

axios 인스턴스에  withCrediential: true  옵션을 설정해주는 것이다.

// src/api/core/index.ts

import axios from "axios";

const request = axios.create({
  baseURL: "http://localhost:4000/api",
  withCredentials: true, 👈
});

request.defaults.timeout = 2000;

export default request;

Request Headers에 값 들어간거 확인했다.

 

 

그 다음,

 

 

Server에서 Express 라우터 응답 파라미터에서 res의 cookie가 없는 문제를 해결해보자.

이 문제는 cookie-parser라는 라이브러리를 사용해서 해결한다.

cookie-parser 라이브러리는 req.cookies의 Cookie헤더를 구문 분석해주는 라이브러리네요.

npm i cookie-parser
npm i -D @types/cookie-parser

설치하고, server.ts에 express instance에 라이브러리 등록해준다.

// ./server.ts
const app = express();
app.use(express.json());
app.use(morgan("dev"));
app.use(cookieParser()); 👈
// ...

 

// ./src/middlewares/auth.ts
import { NextFunction, Request, Response } from "express";
import jwt from "jsonwebtoken";
import User from "../entities/User";

export default async (req: Request, res: Response, next: NextFunction) => {
  try {
    console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
    console.log("req.cookies", req.cookies);
    console.log("req.cookies.token", req.cookies.token);
    const token = req.cookies.token;
    if (!token) return next();
    // ...
  }
  // ...

짜잔. 바로 된다.

클라이언트에서 헤더 통해서 전달한 토큰이 보인다.