Access to XMLHttpRequest at 'https://localhost/auth/login' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the re..

React login 모듈을 만들시, 출력되는 에러이다.

필자는 nestjs 를 도커 환경에서 port 3000번으로 같은 로컬에서 열어논 상태였다.

해당 에러는 cors 정책에 따라 발생하는것으로, 도메인간 자원 공유를 제한하기 위해 발생한다.

하단 과 같이 패키지 설치후 cors 미들 웨어를 설정하여 적용해 볼수 있다

npm install @nestjs/platform-express

import { Module, NestModule, MiddlewareConsumer } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import * as cors from 'cors';

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(cors({
        origin: 'http://localhost:3001', // 클라이언트 도메인
        credentials: true, // 쿠키를 전송할 수 있도록 설정
      }))
      .forRoutes('*');
  }
}