해결된 질문
작성
·
397
·
수정됨
0
import { Body, Controller, Post, Res } from '@nestjs/common';
import { AuthService } from './auth.service';
import { LoginUserValue } from './dto/cats.request.dto';
import { Response } from 'express';
@Controller('auth')
export class AuthController {
constructor(private readonly authService: AuthService) {}
@Post()
async login(@Body() val: LoginUserValue, @Res() res: Response) {
const result = await this.authService.login(val);
//cookie에 토큰을 담아서 보내줌 다음과 같이
console.log(result.refreshToken);
console.log('여기서 못나가네');
res.setHeader(
'Set-Cookie',
`refreshToken=${result.refreshToken}; path=/; `,
);
console.log('뭐야 여기오네?');
// res.setHeader(
// 'Set-Cookie',
// `refreshToken=${result.refreshToken}; path=/; domain=localhost; SameSite=None; Secure; HttpOnly`,
// );
// res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.json({ accesstoken: result.accessToken });
}
}
먼저, 저는 지금 그래프큐엘을 사용하지않고
restAPI를 사용하며 진도를 따라가고 있습니다.
질문드릴 코드는 위와같이 되어있습니다.
원래는 return을 해주고있었는데
res설정하고 쿠키세팅하고나니까
return이 안먹고 클라이언트에서는 무한대기에 빠집니다.
그래서 혹시나해서 res.json으로 하니까
응답이 또 정상적으로 가더라구요..
그래서 일단 다음과 같이 코드를 수정해두고 원래대로
return을 사용하고있는데
혹시 정석은 어떻게 해야하는지 알려주시면 감사하겠습니다.
임시 수정 코드
import { Body, Controller, Post, Req, Res } from '@nestjs/common';
import { AuthService } from './auth.service';
import { LoginUserValue } from './dto/cats.request.dto';
import { Response } from 'express';
@Controller('auth')
export class AuthController {
constructor(private readonly authService: AuthService) {}
@Post()
async login(
@Body() val: LoginUserValue,
@Res({ passthrough: true }) res: Response,
): Promise<any> {
const result = await this.authService.login(val);
//cookie에 토큰을 담아서 보내줌 다음과 같이
res.setHeader(
'Set-Cookie',
`refreshToken=${result.refreshToken}; path=/; `,
);
// res.setHeader(
// 'Set-Cookie',
// `refreshToken=${result.refreshToken}; path=/; domain=localhost; SameSite=None; Secure; HttpOnly`,
// );
// res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
return { accesstoken: result.accessToken };
}
}
답변 2
1
안녕하세요! alopp님!
해당 문제는 rest-api를 사용하는 경우, @Res() res: Response
객체를 받아오는데 문제가 있습니다!
이는 nestjs가 기존 express를 감싸고 있는 구조와 관련이 있어요!
기존 express를 사용하였던 경우에도 res.send(), res.json() 등의 명령어로 마무리를 짓곤 했었죠!
따라서, @Res() res: Response
를 가져오시는 경우에는 사용자가 직접 종료 등의 명령을 작성할 수 있으므로 nestjs의 자동 응답 기능이 무효화되어 무한루프 현상이 발생하게 됩니다.
그렇다면, @Req() req: Request
의 경우에는 어떻게 될까요?
네! 이는 사용자가 응답을 조작하는 것과 관련이 없으므로 자동 응답 기능이 유효합니다.
따라서 @Res()
와 반대로 @Req()
는 무한루프 현상이 발생하지 않아요!^^
해결 방법으로는, res.json()과 같이 응답을 주시는 방법이 가능하며, res는 header 추가 역할만 하고 nestjs의 룰을 원래와 같이 따르고 싶으시다면 passthrough: true
를 추가해 주시는 2가지 방법이 있으며, 후자를 추천드립니다!^^
마지막 스크린샷을 보니, 제대로 작성하신 것 같아요!
1
안녕하세요, 인프런 AI 인턴이에요. 코드를 보니 Rest API를 사용해서 로그인 기능을 구현하고 계시는 것 같아요. 이 때 @Res()
데코레이터를 사용하여 res
객체를 주입받고, res.setHeader()
를 통해 쿠키를 설정하고 응답을 보내고 계신 것 같아요.
return 문제에 대해서 설명해드릴게요. res.json()
메소드를 통해 JSON 응답을 보내고 나면 함수는 종료되기 때문에 해당 코드 블록에서는 return 문이 필요하지 않아요. 따라서 return 문을 추가하지 않고도 원하는 결과를 얻을 수 있어요.
다만, 주의하실 점은 res.setHeader()
메소드 다음에 코드가 계속 진행되는 것처럼 보이지만, 실제로는 해당 메소드를 호출한 뒤 응답을 보내고 종료됩니다. 따라서 res.setHeader()
메소드 이후에 작성한 코드는 보내지 않는 것이 좋아요. 예제 코드에서는 불필요한 console.log()
문이 있습니다.
또한, 필요한 경우 res.setHeader()
메소드를 여러 번 호출하여 다양한 헤더를 설정할 수 있어요. 필요한 쿠키 설정 외에도 다른 헤더를 설정하려면 해당 메소드를 추가로 호출하면 되요.
더 궁금한 점이 있으시면 언제든지 물어보세요!