nestjs + typeorm backend 인터셉터,CORS (5)

1. 개요

• 앞선 네번째 포스팅에서 아래와 같이 간단한 CRUD를 생성했다.
• https://arckwon.tistory.com/entry/nestjs-typeorm-backend-%EC%84%9C%EB%B2%84-%EB%A7%8C%EB%93%A4%EA%B8%B0-CRUD-4
• 이번포스팅에서는 CORS적용, 인터셉터추가를 한다.

 

2. CORS 적용

• Cross-Origin Resource Sharing (CORS) 라고한다.
• 특정 도메인 외부에 위치한 리소스에 대한 액세스를 제어할 수 있는 브라우저 메커니즘
• CORS를 활성화 하려면 서버가 브라우저에 요청처리를 한다고 알려야한다. (
• 브라우저는 서버에 CORS요청을 보내면 응답헤더는 Access-Control-Allow-Origin 헤더를 보고 응답허용여부 결정
• nestjs공식문서에 보면 아래와 같이 처리한다고 제공한다. https://docs.nestjs.com/security/cors

const app = await NestFactory.create(AppModule);
app.enableCors();
await app.listen(3000);

 

const app = await NestFactory.create(AppModule, { cors: true });
await app.listen(3000);

 

• main.ts 파일에 추가

const app: NestExpressApplication = await NestFactory.create(AppModule, {
    cors: true,
});

 

 

3. interceptors 적용

• 인터셉터는 쉽게말해서 사용자의 어떠한 요청이 있을 경우, 가장 앞단에서 거치는 곳이다.
• URL을 가로채서 별도의 처리를 한다던가 세션체크를 해야할경우 등 사용한다.
• 인터셉터는 모듈단위로 module.ts에 별도로 각각 생성할수있고, main.ts에 글로벌로 적용할수 있다.
• 아래내용은 글로벌로 적용한 샘플소스이다.

• src > common > interceptors > logging.interceptor.ts 생성

# logging.interceptor.ts

import {
  Injectable,
  NestInterceptor,
  ExecutionContext,
  CallHandler,
} from '@nestjs/common';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    const { method, url } = context.getArgByIndex(0);
    const localDate = new Date(+new Date() + 3240 * 10000)
      .toISOString()
      .replace('T', ' ')
      .replace(/\..*/, '');

    return next
      .handle()
      .pipe(
        tap(() => console.log(`Interceptor Url ::: ${url} - ${localDate}`)),
      );
  }
}

 

• src > main.ts 파일에 위내용 import하여 적용

# main.ts

import { LoggingInterceptor } from './common/interceptors/logging.interceptor';

app.useGlobalInterceptors(new LoggingInterceptor());

 

4. interceptors 테스트

• 아래와 같이 콘솔창에 URL과 호출시간(한국시간)이 표시된다.