인프런 커뮤니티 질문&답변

안녕하세요 선생님

배포테스트할때 클라이언트에서 api호출하면 쿠키가 전달되지 않고있습니다.

클라이언트에서는

credentials: 'include'를 적용했고

const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/user/setting`, {
        method: 'PATCH',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(userSettingObj),
      });
      if (response.ok) {
        const sessionUpdateInfo = await response.json();
        await updateSession(sessionUpdateInfo);
        router.push('/');
      }

서버에서는

const express = require('express');
const cors = require('cors');
const passport = require('passport');
const session = require('express-session');
const cookieParser = require('cookie-parser');
const dotenv = require('dotenv');
const morgan = require('morgan');
const path = require('path');
const hpp = require('hpp');
const helmet = require('helmet');

const postRouter = require('./routes/post');
const postsRouter = require('./routes/posts');
const userRouter = require('./routes/user');
const usersRouter = require('./routes/users');
const db = require('./models');
const passportConfig = require('./passport');

dotenv.config();
const app = express();
db.sequelize.sync()
  .then(() => { console.log('db 연결 성공') })
  .catch(console.error);
passportConfig();

if (process.env.NODE_ENV === 'production') {
  app.use(morgan('combined'));
  app.use(hpp());
  app.use(helmet());
} else {
  app.use(morgan('dev'));
}

app.use(
  cors({
    origin: ['http://localhost:3000', 'whatisyourmbti.com', 'http://43.201.56.221'], // true or * // access-control-allow-origin가 true된다. --> 다른 도메인끼리 api 요청
    credentials: true, // access-control-allow-credential가 true된다. --> 다른 도메인끼리 쿠키 전달
    method: '*',
  })
);
// 프론트에서 보낸 정보를 req.body에 넣어준다. 순서 중요!
app.use(express.json()); // json 형식으로 보냈을때 데이터 처리해줌
app.use(express.urlencoded({ extended: true })); // form submit으로 보냈을 때 데이터 처리해줌
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
  saveUninitialized: false,
  resave: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  }
}));
app.use(passport.initialize());
app.use(passport.session());

app.use((req, res, next) => {
  console.log('Session ID:', req.sessionID);
  console.log('Cookies:', req.cookies);
  console.log('Signed Cookies:', req.signedCookies);
  next();
});

app.get('/', (req, res) => {
  res.send('hello express');
});

app.get('/api', (req, res) => {
  res.send('hello api');
});

app.use('/post', postRouter);
app.use('/posts', postsRouter);
app.use('/user', userRouter);
app.use('/users', usersRouter);

app.listen(80, () => {
  console.log('서버 실행 중!');
});

credentials: true, 쿠키옵션을 설정해주었는데

0|app | Session ID:---------------------------- U8DRuillNv2DBRmexmO1mZZ7fGJeWXCw

0|app | Cookies:------------------------------- [Object: null prototype] {}

0|app | Signed Cookies:------------------------ [Object: null prototype] {}
이런식으로 쿠키값이 전달되고 있지 않아서

유저 정보가 필요한(로그인 확인)로직에서 401에러가 떨어지게 됩니다.

app.use(session({
  saveUninitialized: false,
  resave: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  }
}));

위부분들을 검색해보고 바꿔보기도 했는데, 잘안되더라구요.

클라이언트의 ip는 http://43.201.56.221입니다.

쿠키는 로그인 후 프론트서버에서 브라우저에 삽입해주고 있습니다.

console.log(`${process.env.NEXT_PUBLIC_BASE_URL}/user/login ---------------------login api`);
          const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/user/login`, 
            {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                ...credentials
              }),
            }
          );
          
          // 프론트서버에서 백엔드서버의 로그인 토큰을 받아온것. 토큰은 문자열이라서
          // cookie라이브러리로 객체로 만들어준다.
          let setCookie = authResponse.headers.get('Set-Cookie');

          console.log('set-cookie', setCookie);
          if (setCookie) {
            const parsed = cookie.parse(setCookie);
            console.log(parsed, '---------------parsed cookie');
            // 브론트서버에서 브라우저에 쿠키를 심어준다.
            // 프론트서버에 쿠키를 심으면 안된다! 왜냐하면 프론트서버는 서버라서 공용이다.
            // 여러 브라우저가 전부 프론트서버르 바라본다. 개인정보 유출 문제 발생할 수 있다.
            cookies().set('connect.sid', parsed['connect.sid'], parsed); // parsed = 나머지 옵션들
          }
          
          console.log(authResponse, '--------------------------------authResponse');
          let user = await authResponse.json();
          console.log(user, '--------------------------------user'); 
          // console.lo(authResponse);
          if (!authResponse.ok) {
            return null;
          }

          // return user object with the their profile data
          return {
            ...user,
            email: user.email,
            name: user.nickname,
            image: user.image,
            id: user.id,
          }
        } catch (err) {
          console.error('로그인 에러', err);
        } 

그리고 cors에러는 발생하지 않고있습니다.

혹시 수정해야할 코드나, 참고해야할 부분이 있다면 알려주시면 감사하겠습니다.