CORS 문제 및 쿠키 전송 이슈 해결 방법

문제 상세 🔍

1. CORS(Cross-Origin Resource Sharing) 문제 🚧

클라이언트(lico.digital)와 서버(devapi.lico.digital)가 서로 다른 서브도메인에 위치하여, 브라우저의 보안 정책인 CORS로 인해 서버에서 클라이언트로의 쿠키(예: JWT 토큰) 전송이 차단되었습니다.

2. 쿠키 전송 이슈 🍪

JWT 토큰을 쿠키에 저장하여 인증을 관리하려 했지만, 쿠키가 서버에서 클라이언트로 전송되지 않았습니다.

3. 쿠키 설정을 통한 JWT 공유 🔑

JWT 토큰을 쿠키에 저장할 때 공통 상위 도메인을 설정하여 서브도메인 간에 쿠키를 공유할 수 있도록 했습니다.

• 인증 컨트롤러 수정 (auth.controller.ts):

  // src/auth/auth.controller.ts
  import { Controller, Get, Req, Res } from '@nestjs/common';
  import { Request, Response } from 'express';
  import { ConfigService } from '@nestjs/config';
  
  @Controller('auth')
  export class AuthController {
    constructor(private configService: ConfigService) {}
  
    @Get('github/callback')
    async handleAuthCallback(@Req() req: Request & { user: any }, @Res() res: Response) {
      const jwt = req.user.jwt;
  
      res.cookie('jwt', jwt, {
        httpOnly: true,
        secure: true, // HTTPS 사용 시 true
        maxAge: 3600000, // 1시간
        sameSite: 'none', // 크로스 사이트 요청에서 쿠키 전송 허용
        domain: '.lico.digital', // 공통 상위 도메인 설정
        path: '/', // 쿠키 요청을 허용하는 URL
      });
  
      const clientUrl = this.configService.get<string>('CLIENT_URL') || 'https://lico.digital';
      res.redirect(clientUrl);
    }
  }

• main.ts 설정 확인:

  import { NestFactory } from '@nestjs/core';
  import { AppModule } from './app.module';
  import { ConfigService } from '@nestjs/config';
  import * as cookieParser from 'cookie-parser'; // cookie-parser
  
  async function bootstrap() {
    const app = await NestFactory.create(AppModule);
  
    // ConfigService 가져오기
    const configService = app.get(ConfigService);
  
    // PORT 설정
    const port = configService.get<number>('PORT') || 3000;
  
    app.use(cookieParser()); // cookie-parser 미들웨어 사용
    app.enableCors({
      // CORS 설정
      origin: configService.get<string>('CORS') || '*',
      credentials: true,
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
      allowedHeaders: ['Content-Type', 'Authorization'],
    });
  
    await app.listen(port);
    console.log(`lico is running on: ${await app.getUrl()}`);
  }
  bootstrap();

결정적인 옵션: 공통 상위 도메인 설정 🛠️

• domain: '.lico.digital', // 공통 상위 도메인 설정 이렇게 설정하니 문제가 해결되었습니다.

추가 고려 사항 🤔

개발 환경과 배포 환경에서 도메인이 다를 경우, 공통 상위 도메인 설정이 어려울 수 있습니다. 이를 해결하기 위해 환경 변수나 설정 파일을 활용하여 도메인을 동적으로 설정하는 방안을 고려해 볼 수 있을 거 같습니다.